将自定义宽度设置为 colspan 行下方的列答案

【问题标题】：set custom width to columns below colspan row将自定义宽度设置为 colspan 行下方的列
【发布时间】：2018-08-27 06:53:30
【问题描述】：

我有一张固定 thead 和 tfoot 的桌子，我在 thead 上使用 rowspawn 和 colspan。

有没有办法为COL 7（COL 7-1、COL 7-2 和COL 7-3）下面的列设置自定义宽度？我已经尝试了很多东西，但我无法弄清楚如何解决这个问题。

正如您所见，在这些列上使用 style="width" 没有帮助。

tbody {
  display: block;
  height: 200px;
  overflow-y: scroll;
  width: 100%;
}

thead,
tfoot {
  display: table;
  width: 100%;
  table-layout: fixed;
}

tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

th {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cap {
  width: 30.085%;
  text-align: right !important;
}

thead,
tfoot {
  width: calc(100% - 17px);
  background-color: #F1F1F1;
  padding-right: 17px;
}

html,
body {
  width: 100%;
  height: 99%;
  padding: 0;
  margin: 0;
}

.contenedor {
  left: auto;
  right: auto;
  margin: auto;
}

.cuerpo80 {
  background: #FFFFFF;
  padding: 1px;
  border: 1px solid #CCCCCC;
  margin: 10px auto;
  overflow: auto;
}

.numerico {
  text-align: right !important;
}

.string {
  text-align: left !important;
}

.stringSO {
  text-align: left !important;
}

table.cuerpoTabla {
  border-spacing: 1;
  font-family: Arial, 'Arial Unicode MS', sans-serif !important;
  font-size: 12px;
  width: 100%;
  color: #2D396C;
}

table.cuerpoTabla thead th,
table.cuerpoTabla tfoot th {
  text-align: center;
  background: #96A8B9;
  border: 1px solid #446380;
  height: 25px;
}

table.cuerpoTabla thead th {
  padding: 0px 4px;
}

table.cuerpoTabla tfoot th {
  padding: 2px 10px 0;
}

table.cuerpoTabla thead tr:first-child th:first-child {
  -moz-border-radius: 4px 0 0;
  -webkit-border-radius: 4px 0 0 0;
  border-radius: 4px 0 0 0;
}

table.cuerpoTabla thead tr:first-child th:last-child {
  -moz-border-radius: 0 4px 0 0;
  -webkit-border-radius: 0 4px 0 0;
  border-radius: 0 4px 0 0;
}

table.cuerpoTabla thead tr:first-child th:only-child {
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}

table.cuerpoTabla tbody th,
table.filtrosTabla tbody td {
  margin: 3px;
  min-height: 25px;
}

table.cuerpoTabla tbody tr:nth-child(even) td {
  background: #E5EDFA;
}

.complete_td {
  padding: 2px 10px 0 !important;
  text-align: left !important;
  font-weight: bold;
}

.subtotal td:first-child {
  font-weight: bold !important;
  text-align: right !important;
}

table.cuerpoTabla tbody tr:nth-child(odd) td {
  background: #FFF;
}

table.cuerpoTabla tbody tr:not(.nohover):hover td {
  background: #EFBF50 !important;
  color: #405989;
}

table.cuerpoTabla tbody td {
  background: #EBEEF1;
  height: 25px !important;
  text-align: center;
  padding: 2px 5px;
}

table.cuerpoTabla tbody td:first-child:not([colspan]) {
  text-align: center;
  background: #96A8B9 !important;
  border: 1px solid #446380;
  height: 25px;
  width: 2%;
}

table.cuerpoTabla tbody td:first-child {
  background: #96A8B9 !important;
  border: 1px solid #446380;
  height: 25px;
}

table.cuerpoTabla tfoot tr:last-child th:first-child {
  -moz-border-radius: 0 0 0 4px;
  -webkit-border-radius: 0 0 0 4px;
  border-radius: 0 0 0 4px;
}

table.cuerpoTabla tfoot tr:last-child th:last-child {
  -moz-border-radius: 0 0 4px 0;
  -webkit-border-radius: 0 0 4px 0;
  border-radius: 0 0 4px 0;
}

table.cuerpoTabla tfoot th:only-child {
  -moz-border-radius: 0 0 4px 4px;
  -webkit-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
}

<body>

  <div class="contenedor">

    <div class="cuerpo80">

      <div>

        <table class="cuerpoTabla" style="min-width: 1393px">

          <thead>

            <tr>

              <th style="width: 3%;" rowspan="2">COL 1</th>
              <th style="width: auto;" rowspan="2">COL 2</th>
              <th style="width: 9%;" rowspan="2">COL 3</th>
              <th style="width: 6%;" rowspan="2">COL 4</th>
              <th style="width: 9%;" rowspan="2">COL 5</th>
              <th style="width: 6%;" rowspan="2">COL 6</th>
              <th style="width: 20%;" colspan="3">COL 7</th>
              <th style="width: 6%;" rowspan="2">COL 8</th>
              <th style="width: 7%;" rowspan="2">COL 9</th>

            </tr>

            <tr>

              <th style="width: 48%;">COL 7-1</th>
              <th style="width: 48%;">COL 7-2</th>
              <th style="width: 4%;">COL 7-3</th>

            </tr>

          </thead>

          <tbody>
          </tbody>

          <tfoot>
          </tfoot>

        </table>

      </div>

    </div>

  </div>



</body>

【问题讨论】：

标签： html css

【解决方案1】：

当他们从上面的行和单元格宽度开始时，最好的方法是在你的第二行中嵌套一个表格（COL 7-1 等）

一个例子：https://codepen.io/blueocto/pen/jzVBWz

您可以看到正在应用的宽度。

<th style="width: 20%;" colspan="3">
COL 7
<table>
<tr>
<th style="width: 48%;">COL 7-1</th>
<th style="width: 48%;">COL 7-2</th>
<th style="width: 4%;">COL 7-3</th>
</tr>
</table>
</th>

如果我的回答确实有助于解决您的问题，我非常感谢您的支持，谢谢。

【讨论】：