当你创建一个表时
table-layout: fixed;
它占用了 100% 的宽度。然后你尝试创建 4 列(10%、10%、40%、40%)
但是，有些行只有 2 列长，因此我们使用 colspan="2"，但这会打破预定义的宽度值并均匀分布所有内容。
我目前的解决方案是在 td 标签中嵌套表格。
是否有更好的方法来执行此操作或阻止 colspan 超出我的宽度？
下面是一个简单的 2 列中断示例:
编辑:CODE 更新代码以获得更好的示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
table {
table-layout: fixed;
}
</style>
</head>
<body>
<table style="width: 100%">
<caption>Table of Contents</caption>
<tbody>
<tr>
<td style="width: 5%;">
<div>1</div>
</td>
<td style="width: 95%;" colspan="2">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>2</div>
</td>
<td style="width: 5%;">
<div>-</div>
</td>
<td style="width: 90%;">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>3</div>
</td>
<td style="width: 5%;">
<div>-</div>
</td>
<td style="width: 90%;">
<div>Chapter Name</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
已更新解决方案
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table style="width: 100%">
<colgroup>
<col class="short" />
<col class="short" />
<col class="long" />
</colgroup>
<tr>
<td colspan="3">
<div>Table of Contents</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>1</div>
</td>
<td style="width: 95%;" colspan="2">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>2</div>
</td>
<td style="width: 5%;">
<div>-</div>
</td>
<td style="width: 90%;">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td>
<div>3</div>
</td>
<td>
<div>-</div>
</td>
<td>
<div>Chapter Name</div>
</td>
</tr>
</table>
</body>
</html>
CSS
table {
table-layout: fixed;
}
.short {
width: 5%;
}
.long {
width: 90%;
}
table {
table-layout: fixed;
}
.short {
width: 5%;
}
.long {
width: 90%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table style="width: 100%">
<colgroup>
<col class="short" />
<col class="short" />
<col class="long" />
</colgroup>
<tr>
<td colspan="3">
<div>Table of Contents</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>1</div>
</td>
<td style="width: 95%;" colspan="2">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>2</div>
</td>
<td style="width: 5%;">
<div>-</div>
</td>
<td style="width: 90%;">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td>
<div>3</div>
</td>
<td>
<div>-</div>
</td>
<td>
<div>Chapter Name</div>
</td>
</tr>
</table>
</body>
</html>最佳答案
您可以使用 colgroup ( original answer here )
html * {
font-size: 98%;
color: #000;
font-family: Arial !important;
}
table {
table-layout: fixed;
width: 100%;
}
th,
td {
padding: 15px;
word-break: break-all;
border: 1px solid black;
}
.short {
width: 5%;
}
.long {
width: 95%;
}<table style="width: 100%">
<colgroup>
<col class="short" />
<col class="long" />
</colgroup>
<tr>
<td colspan="2">
<div style="font-size: 300%;">Table of Contents</div>
</td>
</tr>
<tr>
<td>
<div>1</div>
</td>
<td>
<div>2</div>
</td>
</tr>
</table>关于html - 表格 css 宽度被 colspan 属性破坏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35732446/