0

我正在尝试构建一个 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;
}

这是一个jsFiddle。

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

4

3 回答 3

0

你可以用这个

    <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>
于 2012-11-24T05:50:06.140 回答
0

如果您正在创建一个非常大的表，那么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;
}

这是小提琴

建议：

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

<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;
}
于 2012-11-25T02:44:15.270 回答