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>