Thuộc tính HTML DOM Style tableLayout trả về và sửa đổi cách sắp xếp các ô, hàng và cột của bảng trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
1. Trả lại tableLayout
object.tableLayout
2. Sửa đổi tableLayout
object.tableLayout = “value”
Giá trị ở đây có thể là -
| Giá trị | Giải thích |
|---|---|
| tên đầu tiên | Nó đặt giá trị thuộc tính này thành giá trị mặc định. |
| kế thừa | Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó. |
| đã sửa | Nó đặt chiều rộng cột dựa trên chiều rộng của cột và bảng. |
| tự động | Nó đặt chiều rộng cột dựa trên chiều rộng của nội dung rộng nhất không thể phá vỡ trong bảng. |
Hãy để chúng tôi xem một ví dụ về HTML DOM Style tableLayout Property -
Ví dụ
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
text-align: center;
}
table {
margin: 2rem auto;
width: 400px;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
</style>
<body>
<h1>DOM Style tableLayout Property Demo</h1>
<table border="2">
<caption>Student Entry</caption>
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
<tr>
<td>John</td>
<td>031717</td>
</tr>
<tr>
<td>Elon</td>
<td>041717</td>
</tr>
</table>
<button onclick="show()" class="btn">Set tableLayout</button>
<script>
function show() {
document.querySelector('table').style.tableLayout = "fixed";
}
</script>
</body>
</html> Đầu ra
Nhấp vào “ Đặt tableLayout ”Để đặt tableLayout với fixed giá trị -
