数据结构
网络
关系数据库管理系统 (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 次浏览
