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结构必须以某种方式进行修改。

我找到了两个选项：

逐行修改表格结构，删除隐藏的td元素，并向可见的colspan元素添加适当的td属性
将所有“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;
}

Answer 2

尝试

visibility: hidden;

这应该保持在布局中。

如何隐藏表格单元格并使另一个单元格填充腾出的空间

2 个答案: