HTML作成テーブル

Question

私が必要とするようにテーブルを作成することに問題があります。

私はこの

のようなテーブルが必要しかし、私はgettng維持すると、そのエーテルがsundmused JA hadaabiのテキストでは、オーバーラップしているかthextのアライメントは奇妙な取得しますので、thevahetusedセルが広すぎる取得します。誰かが私のようなテーブルを作成するのを助けることができますか？

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

これは疑わしい課題のようです！しかし、とにかく：

私はあなたの問題は、最初の2つのセルが最下行の3つの列に分かれていて、自動的にはそうしないと思っています。細胞に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>