HTML创建表

Question

我无法让表看起来像我需要的。

我需要的表像这样

，但我保持gettng是醚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

这看起来像一个任务可疑！但无论如何：

我怀疑你的问题是，底部行的前两个单元'跨'三列，他们不会自动做到这一点。给单元格添加colspan="3"会得出如下结果，这就是你所需要的。

td { 
 
    text-align: center; 
 
}

<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>

Answer 3

添加您的风格这段代码（填充，边距和颜色）

<table border style='text-align: center;border-collapse: collapse'> 
    <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>