小编day*_*mer的帖子

Colspan 和表格布局:修复了破坏我的表格样式的问题

我有一个表,我需要其中的行具有特定的宽度。但是 colspan 和 table-layout:fixed 破坏了我想要的样式。请注意,我无法更改html 代码中的任何内容,也无法删除 table-layout:fixed。我想要的东西只用CSS就能实现吗?或者说除非改变html就无法完成?

table {
  table-layout: fixed;
  width: 100%;
}

th,
td {
  border: 1px solid black;
}

th:first-child,
td:first-child {
  width: 5%;
  background-color: lightblue;
}

td:nth-child(2),
tr:last-child th:nth-child(2) {
  width: 70%;
  background-color: lightpink;
}

td:nth-child(3),
th:nth-child(3) {
  width: 10%;
  background-color: lightgreen;
}

td:nth-child(4),
th:nth-child(4) {
  width: 10%;
  background-color: #a9a9a9;
}

td:last-child,
th:nth-child(5) {
  width: 5%;
  background-color: #d4d4d4;
}
Run Code Online (Sandbox Code Playgroud)
<table>
  <thead>
    <tr>
      <th>1</th>
      <th colspan="4">2</th>
    </tr>
    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>
      <th>d</th>
      <th>e</th> …
Run Code Online (Sandbox Code Playgroud)

html css html-table

5
推荐指数
1
解决办法
1895
查看次数

标签 统计

css ×1

html ×1

html-table ×1