Question

我有一张表，总是有三列相对相同的信息。

我试图让它看起来像这样：

因此，每个“单元格”（在x区域内）当前是两个td，一个用于文本，另一个用于图像。

我正在试图弄清楚如何在整个页面上均匀地分隔它们和在每个页面之间留一小部分。

目前，它看起来像

HTML：

<div>
    <table>
        <colgroup>
            <col style="width:33%">
            <col style="width:33%">
            <col style="width:33%">
        </colgroup>
        <tbody>
            <tr>
                <td class="cellData">
                    <h2><u>Brennon Huels</u></h2>
                    <p id="email">Meghan35@hotmail.com</p>
                    <p id="phoneNumber">279-027-8862 x78041</p>
                </td>
                <td class="cellImage">
                    <img src=https://i.imgur.com/9ZC02Oss.jpg >
                </td>

                <td class="cellData">
                    <h2><u>Xzavier Schinner</u></h2>
                    <p id="email">Ayla_Fritsch@hotmail.com</p>
                    <p id="phoneNumber">078-723-5610 x715</p>
                </td>
                <td class="cellImage">
                    <img src=https://i.imgur.com/9ZC02Oss.jpg >
                </td>

                <td class="cellData">
                    <h2><u>Leone Mayert</u></h2>
                    <p id="email">Nicolette.Nicolas@yahoo.com</p>
                    <p id="phoneNumber">003-101-8397</p>
                </td>
                <td class="cellImage">
                    <img src=https://i.imgur.com/9ZC02Oss.jpg >
                </td>

            </tr>
            <tr>

                <td class="cellData">
                    <h2><u>Moriah Howe</u></h2>
                    <p id="email">Carli_Friesen7@hotmail.com</p>
                    <p id="phoneNumber">1-837-151-2364 x2091</p>
                </td>
                <td class="cellImage">
                    <img src=https://i.imgur.com/9ZC02Oss.jpg >
                </td>

                <td class="cellData">
                    <h2><u>Jayce Koch</u></h2>
                    <p id="email">Joaquin.Barrows@hotmail.com</p>
                    <p id="phoneNumber">1-227-294-3980 x9561</p>
                </td>
                <td class="cellImage">
                    <img src=https://i.imgur.com/9ZC02Oss.jpg >
                </td>

                <td class="cellData">
                    <h2><u>Mekhi Haag</u></h2>
                    <p id="email">Neva3@hotmail.com</p>
                    <p id="phoneNumber">(682) 411-5607 x6897</p>
                </td>
                <td class="cellImage">
                    <img src=https://i.imgur.com/9ZC02Oss.jpg >
                </td>
            </tr>
            <tr>
                <td class="cellData">
                    <h2><u>Merl Kshlerin</u></h2>
                    <p id="email">Harold_Deckow@yahoo.com</p>
                    <p id="phoneNumber">627-951-5298 x726</p>
                </td>
                <td class="cellImage">
                    <img src=https://i.imgur.com/9ZC02Oss.jpg >
                </td>               
            </tr>
        </tbody>
    </table>
</div>

CSS：

table{
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

tr{
    display: block;
    padding: 5px;
    margin-bottom: 10px;
}

table td{
    border:3px solid red;
    width:33%;
    padding-right: 10px;
}

tr td{
    margin: 10px;
    width: 33%;
}

td img{
    /*display: block;*/
    vertical-align: middle;
    padding: 4px;
}

tr p{
    margin: 0px;
    padding-left: 10px;
}

我试过玩这些课无济于事，并尝试应用this answer但也没有用，所以我被卡住了。

非常感谢任何想法或帮助！

编辑：如果一个表是错误的方式，我会接受替代方案......我仍在学习HTML，所以只是做了一个表，因为我想要的东西看起来像它，但没有其他原因。

表格格式 - 如何获得一致/等效的大小？

0 个答案: