html - 设计一个固定的布局表

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>