資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何設定表格列寬，使其不受單元格文字量的影響？
HTML 的table標籤以表格格式（行*列）顯示資料。一行可以有多列。使用<table>元素和<tr>、<td>和<th>元素，我們可以建立一個表格以表格形式顯示資料。每個表格的行、標題和資料分別由<tr>、<th>和<td>標籤指定。頁面佈局由HTML表格管理。
示例
下面的示例演示了表格列的預設寬度設定。
<!DOCTYPE html>
<html>
<head>
<title> An example of a table in HTML </title>
<style>
table, td, th{
border: 1px solid darkgray;
border-spacing: 0;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th> Heading 1 </th>
<th> Heading 2 </th>
<th> Heading 3 </th>
</tr>
<tr>
<td> Sample text </td>
<td> Sample text </td>
<td> Sample text </td>
</tr>
<tr>
<td> Sample text </td>
<td> Sample text </td>
<td> Sample text </td>
</tr>
<tr>
<td> Sample text </td>
<td> Sample text </td>
<td> Sample text </td>
</tr>
</table>
</body>
</html>
輸出
讓我們看看如果我們更改其中一個單元格的文字量會發生什麼。
我們可以看到，由於一個單元格的內容量增加，整列的寬度也會增加，這會破壞表格的佈局。在本文中，我們將討論透過固定列寬來克服此問題的方法，無論文字量如何。
使用“width”和“table-layout”屬性
表格單元格的寬度使用HTML <td> width 屬性指定。如果未指定 width 屬性，則寬度將由內容決定。
語法
<td width="pixels or %">
屬性值
畫素：它以畫素指定表格單元格的寬度。
%：它以百分比 (%) 指定表格單元格的寬度。
table-layout屬性指定瀏覽器應使用哪種演算法來佈局表格行、單元格和列。它用於顯示錶格的佈局。
語法
table-layout: auto | fixed | inherit;
auto：這是預設值。瀏覽器自動演算法用於定義表格行、單元格和列的佈局。生成的表格佈局通常由表格內容決定。
fixed：表格佈局忽略內容，而是使用表格寬度、任何指定的列寬以及邊框和單元格間距值。使用的列值由表格第一行中列或單元格上定義的寬度確定。
inherit：它表明該值是從其父級的 table-layout 值派生的。
對於 fixed 值產生任何影響，必須將表格寬度設定為 auto 之外的其他值。
示例
以下示例透過使用 <th> 和 <td> 的 width 屬性並將 table-layout 屬性設定為 fixed 來設定表格列寬保持固定，不受文字量的影響。
<!DOCTYPE html>
<html>
<head>
<title>
How to Set the Table Column Width Regardless of the Text Amount in its Cells?
</title>
<style>
body{
margin: 30px;
background-color: floralwhite;
}
table{
border: 2px solid darkcyan;
border-spacing: 0;
border-collapse: collapse;
width: 360px;
table-layout: fixed;
}
td, th {
background-color: cornsilk;
border: 1px solid darkcyan;
color: darkslateblue;
width: 120px;
text-align: center;
overflow: hidden;
}
h3{
color: darkslateblue;
margin: 10px;
}
</style>
</head>
<body>
<h3> Class toppers for the current academic year </h3>
<table>
<tr>
<th> Student name </th>
<th> Roll number </th>
<th> CGPA </th>
</tr>
<tr>
<td> Krish </td>
<td> 17 </td>
<td> 9.8 </td>
</tr>
<tr>
<td> Simran </td>
<td> 45 </td>
<td> 9.72 </td>
</tr>
<tr>
<td> Namrata </td>
<td> 23 </td>
<td> 9.61 </td>
</tr>
</table>
</body>
</html>
輸出
現在，如果我們將一個或多個單元格中的文字增加到超出單元格範圍的程度，列寬將不會更改以適應額外的內容。
我們可以看到，列寬沒有改變。文字不會溢位，並且在單元格末尾被裁剪，因為我們使用了 overflow 屬性的hidden屬性。
863 次瀏覽
