Question

我正在尝试创建四个均匀间隔的<table>单元格，但出于某种原因，我在执行此操作时遇到了一些困难（即使我为它们设置了一定的宽度）。

下面可以看到一个例子，其中第二个单元格看起来比其他单元格大：

enter image description here

<tr>
    <td style="width: 100%; padding: 0px 20px 0px 20px;" cellspacing="0" cellpadding="20" border="0" colspan="12" align="center">
        <table style="width: 600px; border-collapse: collapse; border: 1px solid orange;" cellspacing="0" cellpadding="20" border="0" colspan="12" align="center">
            <tbody cellspacing="0" cellpadding="0" border="0" colspan="12" align="center" style="width: 100%;" width="100%">
                <tr cellspacing="0" cellpadding="0" border="0" colspan="12" align="center" style="width: 100%;" width="100%">
                    <td cellspacing="0" cellpadding="0" width="148" style="width: 148px; color: #1F1F1F; text-align: center; border: 1px solid orange; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;" >
                        <img src="http://dummyimage.com/50x50/000/fff.jpg&text=Icon" alt="Bullhorn Icon" width="50" height="50" /><br />
                        <p style="font-family: Helvetica, Arial, Verdana; font-size: 10px; color: #1F1F1F; text-align: center;">Dolorla ti <br />amet silio</p>
                    </td>
                    <td cellspacing="0" cellpadding="0" width="148" style="width: 148px; color: #1F1F1F; text-align: center; border: 1px solid orange; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;" >
                        <img src="http://dummyimage.com/50x50/000/fff.jpg&text=Icon" alt="Lab Icon" width="50" height="50" /><br />
                        <p style="font-family: Helvetica, Arial, Verdana; font-size: 10px; color: #1F1F1F; text-align: center;">Adipiscing <br />consecteture</p>
                    </td>
                    <td cellspacing="0" cellpadding="0" width="148" style="width: 148px; color: #1F1F1F; text-align: center; border: 1px solid orange; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;" >
                        <img src="http://dummyimage.com/50x50/000/fff.jpg&text=Icon" alt="Atom Icon" width="50" height="50" /><br />
                        <p style="font-family: Helvetica, Arial, Verdana; font-size: 10px; color: #1F1F1F; text-align: center;">Facili elit <br />torem</p>
                    </td>
                    <td cellspacing="0" cellpadding="0" width="148" style="width: 148px; color: #1F1F1F; text-align: center; border: 1px solid orange; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;" >
                        <img src="http://dummyimage.com/50x50/000/fff.jpg&text=Icon" alt="File Icon" width="50" height="50" /><br />
                        <p style="font-family: Helvetica, Arial, Verdana; font-size: 10px; color: #1F1F1F; text-align: center;">Ipsum sit <br />sepida colt</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

JSFiddle

如何创建四个均匀分布的表格单元格？

Answer 1

您需要使用table-layout属性。

http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout

在你的情况下：

<table style="width: 600px; border-collapse: collapse; border: 1px solid orange;table-layout:fixed;" cellspacing="0" cellpadding="20" border="0" colspan="12" align="center">

<强> DEMO

Answer 2

正如您将注意到的那样，当您在某些devoloper工具（例如Chrome）中检查已解析的内容时，您的<td> width: 148px被否决，并被替换为{{ {1}}等等。只需添加

103.8546546px

到你的CSS或内联样式。，你会得到你想要的。

分叉小提琴 - ＆gt;的 http://jsfiddle.net/CaVpC/

四个均匀间隔的桌箱

2 个答案: