Question

我需要对html使用以下结构。它需要遵循相同的格式，因此无法更改。

因此，在表格单元格启动之前，我将表格标签嵌套在表格行中。

数据是表格数据，因此使用css表是有意义的。

我想要一个仅CSS的解决方案，使数据链接到标头中的数据并保持响应状态。没有form标签，这可以完美地工作，但是form标签破坏了布局。

由于html的结构，

css网格和flexbox不提供解决方案。

<div class="container table">
    <div class="table-header table-row">
        <div class="table-cell">item1</div>
        <div class="table-cell">item2</div>
        <div class="table-cell">item3</div>
        <div class="table-cell">item4</div>
        <div class="table-cell">submit</div>
    </div>
    <div class="table-row">
       <form>
            <div class="table-cell"><input type="text"></div>
            <div class="table-cell"><input type="text"></div>
            <div class="table-cell"><input type="text"></div>
            <div class="table-cell"><input type="text"></div>
            <div class="table-cell"><button>Update</button></div>
        </form>
    </div>
</div>

.container {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

在这里拨弄：https://jsfiddle.net/rachymm/mwjvde4r/23/

我可以使用javascript来做到这一点，但是首先尝试找到仅CSS的解决方案。

Answer 1

您可以尝试

.table-row > form {
  display: contents;
}

仅显示元素内容，而不显示元素本身。 https://jsfiddle.net/n0xpywj7/

当表格行进一步嵌套时，是否有办法让CSS表格行与表格标题配对？

1 个答案: