Проектирование таблицы с фиксированной разметкой

Я пытаюсь построить таблицу с 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 столбца одинаковой ширины. Что я делаю не так?

Источник

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;
}
Источник

Ты можешь использовать это

    <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>
Источник

Если вы создаете очень большую таблицу, то 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
Источник
Другие вопросы по тегам