HTML创建表

Question

我无法让桌子看起来像我需要的那样。

我需要这样的表

但是我一直认为，以太的文本是sundmused ja hadaabi是重叠的，或者thevahetused的单元格太宽，所以thext的对齐变得奇怪。有人可以帮我创建这样的表格。

Answer 1

如果您的桌子太小，当没有足够的空间用于文字时，您可以使用text-overflow: ellipsis;添加...。

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 30%;
  border-collapse: collapse;
  text-align: center;
  margin-bottom: 10px;
}
table:nth-child(2) {
  width: 100%;
}
table:nth-child(3) {
  width: 50%;
}
table td {
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid black;
}

.important {
  background-color: yellow;
}

<table>
  <tr>
    <td colspan="3">vahetused</td>
    <td>sundmused</td>
    <td>hadaabid</td>
  </tr>
  <tr>
    <td class="important" colspan="3">01.01.2017.00:00-02.01.2017.00:00</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Kokku</td>
    <td>1</td>
    <td></td>
    <td>1</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td colspan="3">vahetused</td>
    <td>sundmused</td>
    <td>hadaabid</td>
  </tr>
  <tr>
    <td class="important" colspan="3">01.01.2017.00:00-02.01.2017.00:00</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Kokku</td>
    <td>1</td>
    <td></td>
    <td>1</td>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td colspan="3">vahetused</td>
    <td>sundmused</td>
    <td>hadaabid</td>
  </tr>
  <tr>
    <td class="important" colspan="3">01.01.2017.00:00-02.01.2017.00:00</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Kokku</td>
    <td>1</td>
    <td></td>
    <td>1</td>
    <td>1</td>
  </tr>
</table>

Answer 2

这看起来像是一项任务！但无论如何：

我怀疑你的问题是前两个单元格跨越＆＃39;底行中有三列，他们不会自动执行此操作。将colspan="3"添加到单元格会得到如下结果，这就是您需要的结果。

＆＃13;

＆＃13;

td {
  text-align: center;
}

＆＃13;

<table border="1">
  <tr>
    <td colspan="3">vahetused</td>
    <td>sundmused</td>
    <td>hadaabid</td>
  </tr>
  <tr>
    <td colspan="3">01.01.2017.00:00 - 02.01.2017 00:00</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Kokku</td>
    <td>1</td>
    <td></td>
    <td>1</td>
    <td>1</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将您的样式添加到此代码（填充，边距和颜色）

  

INFO: 42804