表格布局属性详解
概述
本文档系统讲解 表格布局属性详解 中的各个属性。每个属性都配有来自 MDN 的可交互演示，可以直接点击运行查看效果。
表格布局属性
border-collapse
设置表格相邻单元格边框是合并（collapse）还是分离（separate）。
border-collapse 交互演示（MDN）
设置表格相邻单元格边框是合并（collapse）还是分离（separate）。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>border-collapse 属性演示 - MDN 示例</title>
<meta name="description" content="边框与背景示例：border（collapse 属性演示）。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
table {
width: 15rem;
table-layout: fixed;
}
td {
border: 5px solid;
border-color: crimson dodgerblue orange limegreen;
padding: 0.75rem;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">border-collapse: collapse;</button>
<button class="snippet-btn" data-index="1">border-collapse: separate;</button>
</div>
<div class="preview-panel">
<section class="default-example" id="default-example">
<table class="transition-all" id="example-element">
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
</tr>
</table>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
border-collapse: collapse;
}`,
`#example-element {
border-collapse: separate;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
table-layout
设置表格列宽的计算算法（auto 自动/fixed 固定）。
table-layout 交互演示（MDN）
设置表格列宽的计算算法（auto 自动/fixed 固定）。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>table-layout 属性演示 - MDN 示例</title>
<meta name="description" content="演示table（layout 属性演示）的实现方式。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
table {
border: 1px solid #139;
}
th,
td {
border: 2px solid #a19;
padding: 0.25rem 0.5rem;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">table-layout: auto;</button>
<button class="snippet-btn" data-index="1">table-layout: fixed;</button>
<button class="snippet-btn" data-index="2">table-layout: auto;</button>
<button class="snippet-btn" data-index="3">table-layout: fixed;</button>
</div>
<div class="preview-panel">
<section class="default-example" id="default-example">
<table class="transition-all" id="example-element">
<tr>
<th>Name</th>
<th>Location</th>
</tr>
<tr>
<td>Lion</td>
<td>Africa</td>
</tr>
<tr>
<td>Norwegian Lemming</td>
<td>Europe</td>
</tr>
<tr>
<td>Seal</td>
<td>Antarctica</td>
</tr>
<tr>
<td>Tiger</td>
<td>Asia</td>
</tr>
</table>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
table-layout: auto;
width: 150px;
}`,
`#example-element {
table-layout: fixed;
width: 150px;
}`,
`#example-element {
table-layout: auto;
width: 100%;
}`,
`#example-element {
table-layout: fixed;
width: 100%;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>
caption-side
设置表格标题（caption）显示在表格的上方或下方。
caption-side 交互演示（MDN）
设置表格标题（caption）显示在表格的上方或下方。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>caption-side 属性演示 - MDN 示例</title>
<meta name="description" content="文本与字体示例：caption（side 属性演示）。" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
min-height: 100vh;
padding: 0;
}
.demo-layout {
display: flex;
height: 100vh;
gap: 0;
}
.snippet-panel {
width: 320px;
flex-shrink: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
border-right: 1px solid #ddd;
background: #fafafa;
}
.snippet-btn {
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
color: #333;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.snippet-btn:hover {
border-color: #8083ff;
background: #f0f0ff;
}
.snippet-btn.active {
border-color: #8083ff;
background: #e8e8ff;
color: #571bc1;
font-weight: 600;
}
.preview-panel {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: auto;
}
.preview-panel > section,
.preview-panel > div:not(.snippet-panel):not(.demo-layout) {
flex: 1;
width: 100%;
min-height: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
table {
font-size: 1.2rem;
text-align: left;
color: #000;
}
th,
td {
padding: 0.2rem 1rem;
}
caption {
background: #fc3;
padding: 0.5rem 1rem;
}
tr {
background: #eee;
}
tr:nth-child(even) {
background: #ccc;
}
</style>
</head>
<body>
<div class="demo-layout">
<div class="snippet-panel">
<button class="snippet-btn active" data-index="0">caption-side: top;</button>
<button class="snippet-btn" data-index="1">caption-side: bottom;</button>
</div>
<div class="preview-panel">
<section class="default-example" id="default-example">
<table class="transition-all" id="example-element">
<caption>
Famous animals
</caption>
<tr>
<th>Name</th>
<th>Location</th>
</tr>
<tr>
<td>Giraffe</td>
<td>Africa</td>
</tr>
<tr>
<td>Penguin</td>
<td>Antarctica</td>
</tr>
<tr>
<td>Sloth</td>
<td>South America</td>
</tr>
<tr>
<td>Tiger</td>
<td>Asia</td>
</tr>
</table>
</section>
</div>
</div>
<script>
const snippets = [
`#example-element {
caption-side: top;
}`,
`#example-element {
caption-side: bottom;
}`,
];
let styleEl = document.createElement("style");
document.head.appendChild(styleEl);
function applySnippet(index) {
styleEl.textContent = snippets[index];
document.querySelectorAll(".snippet-btn").forEach((btn, i) => {
btn.classList.toggle("active", i === index);
});
}
document.querySelectorAll(".snippet-btn").forEach((btn) => {
btn.addEventListener("click", () => applySnippet(parseInt(btn.dataset.index)));
});
applySnippet(0);
</script>
</body>
</html>