是否可以在 div 中使用 td 元素(没有表格)? [英] Is it possible to use td elements inside div (without table)?

问题描述

我正在尝试创建非常灵活的网格，我的代码大约为

<div class="grid-row"><td class="grid-cell">TEST</td><td class="grid-cell">TEST</td><td class="grid-cell">TEST</td>

但是我有问题:

1. 如果我在行内使用 td 元素，则有时不会应用 CSS 类样式.样式适用于 React 环境，但不适用于 JSFiddle 纯 Bootstrap 环境.
2. 如果我在行内起诉 div 元素，那么这些 div 元素不会位于一行中，而是每个 div 位于更大的 div(行)元素内的单独行中.

那么 - 是否可以(建议)在 div 内使用 td 元素而没有 table 元素?如果没有，那么如何在一行/一行中组织 div 元素(属于一行)?

这个问题与我的另一个问题有关(也有指向 JSFiddle 代码的链接):包含可滚动表格的容器 div并填充所有客户区并删除页面滚动

解决方案

如果你想要一个表格布局，那么使用 display:table

.grid {显示:表；边框:1px 实心；}.grid-row {显示:表格行；边框:1px纯红色；}.grid-cell {显示:表格单元格；边框:1px纯绿色；}

<div class="grid-row"><div class="grid-cell">TEST</div><div class="grid-cell">TEST</div><div class="grid-cell">TEST</div>
<div class="grid-row"><div class="grid-cell">TEST</div><div class="grid-cell">TEST 测试</div><div class="grid-cell">TEST</div>

I am trying to create very flexible grid, my code is approximately as

<div class="grid">
  <div class="grid-row">
    <td class="grid-cell">TEST</td>
    <td class="grid-cell">TEST</td>
    <td class="grid-cell">TEST</td>
  </div>
</div>

But I have problems:

1. If I am using td elements inside row, then CSS class styles are not applied sometimes. Styles are applied in React environment, but are not applied in JSFiddle pure Bootstrap environment.
2. If I am suing div elements inside row, then those div elements are not positioned in one line but each div is in separate line inside the greater div (row) element.

So - is it possible (advisable) to use td elements inside div and without table elements? And if not, then how can I organize div elements (belonging to one row) in one row/line?

This question is related to my other question (there is the links to JSFiddle code as well): Container div that contains scrollable table and that fills all the client area and that removes page scrolls

解决方案

If you want a table layout then use display:table

.grid {
  display: table;
  border: 1px solid;
}

.grid-row {
  display: table-row;
  border: 1px solid red;
}

.grid-cell {
  display: table-cell;
  border: 1px solid green;
}

<div class="grid">
  <div class="grid-row">
    <div class="grid-cell">TEST</div>
    <div class="grid-cell">TEST</div>
    <div class="grid-cell">TEST</div>
  </div>
   <div class="grid-row">
    <div class="grid-cell">TEST</div>
    <div class="grid-cell">TEST Test</div>
    <div class="grid-cell">TEST</div>
  </div>
</div>

这篇关于是否可以在 div 中使用 td 元素(没有表格)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！