我用 HTML 创建了这个表格并添加了 CSS 使其看起来更好，我还成功地将其居中于页面，现在唯一缺少的是更宽的
tfoot这是我到目前为止写的代码：
/* font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
/* resets */
*:not(ul) {
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* smooth scrolling */
html {
scroll-behavior: smooth;
}
/* general */
body {
font-family: 'Open Sans', sans-serif;
letter-spacing: 1px;
}
/* index start */
table {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 3px solid #000;
border-radius: 10px;
}
td {
background-color: lightblue;
border: 3px solid #fff;
border-radius: 10px;
padding: 10px 2rem;
}
.marg {
background-color: orange;
text-align: center;
}
h1 {
font-size: 36px;
}
tfoot td {
background-color: cyan;
}
h2 {
color: red;
text-shadow: 1px 1px 3px #000;
}
li {
font-size: 24px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Value Chain</title>
<!-- CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<table>
<tbody>
<tr>
<td colspan="3">
<h2>INFRASTRUCTURAL ACTIVITIES</h2>
<ul>
<li>Buying an office</li>
<li>Spaces organization</li>
<li>Servers installation</li>
</ul>
</td>
<td rowspan="4" colspan="2" class="marg">
<h1>MARGIN</h1>
</td>
</tr>
<tr>
<td colspan="3">
<h2>HUMAN RESOURCES</h2>
<ul>
<li>Qualified personnel</li>
<li>Training</li>
<li>Cafeteria</li>
</ul>
</td>
</tr>
<tr>
<td colspan="3">
<h2>TECH DEVELOPMENT</h2>
<ul>
<li>PC configuration</li>
<li>Servers configuration</li>
<li>Securing the company network</li>
</ul>
</td>
</tr>
<tr>
<td colspan="3">
<h2>SUPPLYING</h2>
<ul>
<li>Buying and mantaining devices</li>
<li>Buying programming suites</li>
<li>Buying a VPN</li>
</ul>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<h2>INPUT LOGISTICS</h2>
<ul>
<li>Agreements with creators of programming suites</li>
<li>Customers' requests</li>
</ul>
</td>
<td>
<h2>OPERATIVE ACTIVITIES</h2>
<ul>
<li>Conceptual planning</li>
<li>Research</li>
<li>Software development</li>
<li>Quality check</li>
</ul>
</td>
<td>
<h2>OUTPUT LOGISTICS</h2>
<ul>
<li>Agreements with other societies</li>
<li>Sale of licenses to customers</li>
</ul>
</td>
<td>
<h2>MARKETING</h2>
<ul>
<li>Ads and sponsoring</li>
<li>Sales plans</li>
<li>Surveys</li>
</ul>
</td>
<td>
<h2>SERVICES</h2>
<ul>
<li>Customer support</li>
<li>Periodical updates</li>
</ul>
</td>
</tr>
</tfoot>
</table>
</main>
</body>
</html>我尝试添加
tfoot {
width: XXpx; /* XX being a random number */
}
但是没有成功。 我发现唯一能起作用的属性是
paddingfont-sizeposition: absolute;transformtfoot您尝试过其他方法吗？喜欢使用百分比值或 Flexboxe 或布局属性来控制 tfoot 单元格的宽度？