Question

我正在尝试构建一个3个固定列表，左右列应该是47px宽，中间列应该使用剩余空间。这是我做的：

HTML：

<table class='table poem'>
<tr>
    <td colspan="3">
        <span id="title">
            <h3 class='hide center'>Beautiful Poem</h3>
        </span>
    </td>
</tr>
<tr class="verse">
    <td style='vertical-align: middle; text-align: right;'>
        <img src="{{ asset('bundles/yopyourownpoet/images/showPoem/Transparent.png') }}" alt="" height="33" width="47" />
    </td>
    <td>
        <div class='verse'>
            <div class='hide intro'>Here's the special poem for them.</div>
            <div class='hide intro'>Give to them just like a gem.</div>
            <div class='hide intro'>But if you like, I'll change verse.</div>
            <div class='hide intro'>Click an arrow, need not rehearse.</div>
            <div class='hide intro'>When it's ready, click the star. </div>
        </div>
    </td>
    <td style='vertical-align: middle;'>
        <a href= {{ links.changeIntro }}>
            <img src="{{ asset('bundles/yopyourownpoet/images/showPoem/NextVerse.png') }}" alt="Next Intro" height="33" width="47" />
        </a>
    </td>
</tr>

CSS：

table.poem { table-layout: fixed; }
tr.verse { width: 100%; }
tr.verse > td:nth-child(1) { width: 47px; }
/*tr.verse > td:nth-child(2) { width: 70%; }*/
tr.verse > td:nth-child(3) { width: 47px; }
#title, #closing, #ps { min-height: 50px; width: 100%; }
div.verse
{
    text-align: center;
    min-height: 180px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

Here是一个jsFiddle。

但是，该表分为3列宽度相等的列。我做错了什么？

Answer 1

你可以用这个

    <div style="width=100%; margin-left:auto; margin-right:auto;"> 
        <div  style="width=40%; margin-left:auto; margin-right:auto;float:left;">
        </div>
        <div  style="width=40%; margin-left:auto; margin-right:auto; float:right;">
        </div>
    </div>

Answer 2

如果要创建一个非常大的表，那么table-layout: fixed;是一个好主意，因为浏览器只需要读取第一行以便计算和呈现整个表，因此加载速度更快。

但如果没有，您可以使用table-layout默认值并将width:100%;设置为表格或您需要的任何固定宽度：

table.poem { 
   border-collapse: collapse;
   width: 100%; 
}
td{
   border: 1px solid #000;
}
tr.verse { width: 100%; }
tr.verse > td:nth-child(1) { width: 47px; }
tr.verse > td:nth-child(3) { width: 47px; }
#title, #closing, #ps { 
   min-height: 50px; 
   width: 100%; 
}
div.verse
{
    text-align: center;
    min-height: 180px;
    white-space: nowrap;
    overflow: hidden;
}

以下是fiddle

建议：

您可以在不使用表的情况下执行此操作，这是一个简单的3列布局
避免将选择器用作nth-child，很好但与旧浏览器不兼容（例如：IE8）
您可以替换一堆<div class='hide intro'>换行或使用span代替

Answer 3

我终于设法通过在我的表格中添加<colgroup>和<col>标记来获得所需的效果（在页面加载时使用正确的固定维度的表格和列）：

<table class='table poem'>
    <colgroup>
        <col width=47px>
        <col width=100%>
        <col width=47px>
    </colgroup>
    <tr>
        <td colspan="3">
            <div id="title">
                <h3 class='hide center'>{{ poem.poemTitle }}</h3>
            </div>
        </td>
    </tr>
    <tr class="verse">
        <td>
            <img src="{{ asset('bundles/yopyourownpoet/images/showPoem/Transparent.png') }}" alt="" height="33" width="47" />                
        </td>
        <td>
            <div class='verse'>
                <div class='hide intro'>{{ poem.introLine1 }}</div>
                <div class='hide intro'>{{ poem.introLine2 }}</div>
                <div class='hide intro'>{{ poem.introLine3 }}</div>
                <div class='hide intro'>{{ poem.introLine4 }}</div>
                <div class='hide intro'>{{ poem.introLine5 }}</div>
            </div>
        </td>

    </tr>
    <tr>
       <td>
           <a href= {{ links.changeIntro }}>
           <img src="{{ asset('bundles/yopyourownpoet/images/showPoem/NextVerse.png') }}" alt="Next Intro" height="33" width="47" />
           </a>
       </td>
    </tr>
</table>

CSS：

table.poem { table-layout: fixed; width: 100%; }
tr.verse { width: 100%; }
tr.verse > td { vertical-align: middle; }
#title, #closing, #ps { min-height: 50px; width: 100%; }
#closing { padding-top: 25px; font-size: 120%; }
#ps { font-style: italic; font-size: 120%; }
div.verse
{
    text-align: center;
    min-height: 180px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

设计固定的布局表

3 个答案:

建议：