Question

我将一些CSS样式添加到我尚未编写的HTML代码中，并且有些内容位于不同行的表格中，但我需要所有td＆＃39 ; s在同一行。

基本上，我需要像...这样的东西。

+-------+
| a | b |
+---+---+
| c | d |
+-------+

......看起来像......

+---------------+
| a | b | c | d |
+---------------+

Answer 1

您可以执行以下操作（https://jsfiddle.net/gvLbq9rn/）

CSS：

tr {display: table-cell;}

HTML：

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

Answer 2

这给出了最好的结果：

tr, td {
    display: inline;
}

演示

＆＃13;

tr, td {
    display: inline;
}

＆＃13;

<table>
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>c</td>
    <td>d</td>
  </tr>
</table>

＆＃13;

（另见this Fiddle）

Answer 3

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Table</title>
  <style>
    tr{
      display: inline;
    }
  </style>
</head>
<body>
 <table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>D</td>
  </tr>
</table>
</body>
</html>

另一种方式，通过tr显示inline

Answer 4

如果您有一个看起来像这样的 smaple 表：

<table>
  <tr>
    <th>TH1</th>
    <th>TH2</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

那么结果将是：

<头>

TH1	Th2
1	2
3	4

但是您希望将不同 'tr' 中的某些内容放在一行中会使其变得混乱。如果你尝试用 css 来做，你会得到这样的东西

tr {display : inline;}

| TH1 | TH2 |
| 1 | 2 | 3 | 4 |

对于这种情况，最好使用 Grid 这看起来非常混乱！

如何强制不同表行中的td为内联？

4 个答案:

演示