Как убрать пустое место в ячейке таблицы?

В приведенном ниже коде я установил max-width для ячеек таблицы, поэтому все они имеют одинаковую ширину независимо от содержимого, которое они несут, а vertical-align установлено вверху. Но, как вы видите, первая ячейка довольно длинная по сравнению со второй и третьей, поэтому между 2-5-й и 3-й-6-й ячейками таблицы остается огромное пространство. Есть ли способ удалить это пространство? Я имею в виду, что хочу, чтобы 5-я и 6-я ячейки немедленно следовали за вышеуказанными ячейками, а не ждали окончания 1-й ячейки.

table tr td {
  vertical-align:top;
  max-width:90px;
  background-color: #dedede;
  color: black
}
<table>
  <tr>
    <td>this is first cell. this will be quite lengthy</td>
    <td>this is second cell</td>
    <td>this is third cell</td>
  </tr>

  <tr>
    <td>this is fouth cell</td>
    <td>this is fifth cell</td>
    <td>this is sixth cell</td>
  </tr>
</table>


html css html-table tablecell
person bɪˈɡɪnə    schedule 13.02.2016    source источник
comment
Я предполагаю, что вы говорите о чем-то вроде масонства   -  person dippas    schedule 13.02.2016
comment
@dippas да, есть ли решение css?   -  person bɪˈɡɪnə    schedule 13.02.2016
comment
Вы можете использовать плавающие элементы <div> вместо ячеек таблицы, чтобы получить этот эффект.   -  person fredrover    schedule 13.02.2016

Ответы (2)


arrow_upward
2
arrow_downward

Проблема с тем, что вы хотите, заключается в том, что таблицы настроены так, чтобы все было выровнено и организовано. Как уже упоминалось, вам, возможно, захочется больше изучить макет каменной кладки, если вы хотите, чтобы отдельные квадраты складывались вместе, как кирпичи разного размера, стол в этом случае не будет работать, потому что он не предназначен для такой работы.

person Optiq    schedule 13.02.2016

arrow_upward
0
arrow_downward

Если я правильно понимаю, вам все равно, совпадают ли ячейки 5 и 6 с ячейкой 4, если они совпадают друг с другом и избавляются от этого пустого пространства. Во многих случаях для таких вещей лучше использовать div, чем таблицы, но вот решение, которое сохраняет таблицы.

Вам придется создать вторую таблицу, если вы хотите нарушить выравнивание строк, поэтому в первой таблице будут ячейки 1 и 4, а во второй — ячейки 2, 3, 5 и 6. Для вашего стиля используйте display:inline-block, чтобы получить чтобы таблицы располагались рядом друг с другом, и заключайте их в <div>s (никогда не используйте вложенные таблицы) с display:inline; vertical align:top;, если вы хотите, чтобы две таблицы выровнялись вверху. Конечный результат примерно такой:

<head>

<style>
table tr td {
  vertical-align:top;
  max-width:90px;
  background-color: #dedede;
  color: black;
}
.talign{
display:inline-block;
}
.dalign{
display:inline;
vertical-align:top;
}
</style>
</head>
<body>
<div class='dalign'>
<table class='talign'>
  <tr>
    <td>this is first cell. this will be quite lengthy</td>
  </tr>
  <tr>
    <td>this is fouth cell</td>
  </tr>
</table>
</div>
<div class='dalign'>
<table class='talign'>
  <tr>
    <td>this is second cell</td>
    <td>this is third cell</td>
  </tr>
  <tr>
    <td>this is fifth cell</td>
    <td>this is sixth cell</td>
  </tr>
</table>
</div>
</body>
person Austin Brown    schedule 13.02.2016