css - 如何隐藏表格单元格并让另一个单元格填充空出的空间

Question

假设我有一个这样的表:

 <table>
      <tr>
         <th>Type</th>
         <th colspan="3">Type Info</th>
      </tr>
      <tr class="typeA">
         <td><input name="type[0]" /></td>
         <td class="group1"><input name="A[0]" disabled /></td>
         <td class="group2"><input name="B[0]" disabled /></td>
         <td class="group2"><input name="C[0]" disabled /></td>
      </tr>
      <tr class="typeB">
         <td><input name="type[1]" /></td>
         <td class="group1"><input name="A[1]" /></td>
         <td class="group2"><input name="B[1]" disabled /></td>
         <td class="group2"><input name="C[1]" disabled /></td>
      </tr>
      <tr class="typeC">
         <td><input name="type[2]" /></td>
         <td class="group1"><input name="A[2]" disabled /></td>
         <td class="group2"><input name="B[2]" /></td>
         <td class="group2"><input name="C[2]" /></td>
      </tr>
 </table>

某些数据组合无效，因此我们禁用输入。在这种情况下，我相信数据作为表格具有语义意义 - 我不只是将表格用于布局目的。

我想做的是隐藏禁用的单元格，并让具有非禁用元素的单元格填充现在隐藏的单元格以前占据的空间。

我可以使用以下 css 完成隐藏:

.typeA .group1, .typeA .group2 {
    display:none;
}

.typeB .group2 {
   display:none;
}

.typeC .group1 {
    display:none;
}

但是，这给了我:

|_____Type____|____________,__Type Info__,__________|
|_____________|
|_____________|____________|
|_____________|____________|_____________|

我想要的是:

|_____Type____|____________,__Type Info__,__________|
|_____________|
|_____________|____________,_____________,__________|
|_____________|____________,_____________|__________|

(| 表示单元格边界，, 表示单个单元格跨越布局单元格边界的位置。

我可以使用什么 css 来获得所需的 td 以扩展以填充隐藏的 td 元素腾出的水平空间？

Answer 1

似乎没有办法只使用 CSS 来做到这一点。似乎要完成我想要的，必须以某种方式修改 html 结构。

我找到了两个选项:

1. 逐行修改表结构，移除隐藏的td 元素，并为可见的td 元素添加适当的colspan 属性
2. 将所有“group1”和“group2”输入放在相同 单元格中，使用额外的div 结构，这些结构可以设置为表格单元格的样式。

对于第二个选项，例如

<table>
      <tr>
         <th>Type</th>
         <th>Type Info</th>
      </tr>
      <tr class="typeA">
         <td><input name="type[0]" /></td>
     <td>
        <div class="group1">
            <input name="A[0]" />
        </div>
        <div class="group2">
            <div>
                <input name="B[0]" />
            </div>
            &nbsp;
            <div>
                <input name="C[0]" class="staticSize" />
            </div>
    </div>
         </td>
      </tr>
      <tr class="typeB">
         <td><input name="type[1]" /></td>
     <td>
        <div class="group1">
            <input name="A[1]" />
        </div>
        <div class="group2">
            <div>
                <input name="B[1]" />
            </div>
            &nbsp;
            <div>
                <input name="C[1]" class="staticSize" />
            </div>
    </div>
         </td>
      </tr>
      <tr class="typeC">
         <td><input name="type[2]" /></td>
     <td>
        <div class="group1">
            <input name="A[2]" />
        </div>
        <div class="group2">
            <div>
                <input name="B[2]" />
            </div>
            &nbsp;
            <div>
                <input name="C[2]" class="staticSize" />
            </div>
    </div>
         </td>
      </tr>
 </table>

对于第二个选项 css，如下所示:

table {
    width:100%;
}

.typeA .group1, .typeA .group2 {
    display:none;
}

.typeB .group2 {
   display:none;
}

.typeC .group1 {
    display:none;
}

.typeC div.group2 {
    display:table;
    border-collapse:collapse;
}

.typeC div.group2>div {
    width:100%;
    display:table-cell;
}

input:not(.staticSize) {
    width:100%;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
}