有没有办法浮动响应表布局?

时间:2015-03-09 23:36:32

标签: html css responsive-design css-float

我很好奇是否有办法让单元格4在单元格3旁边浮动?

我不想考虑非提交的解决方案(请不要建议,因为我知道如何做到这一点)。如果要求可以逐字完成,我很好奇。

感谢任何可以提供任何意见的HTML / CSS专家。



table{
    width:100%;
    table-layout:fixed;
    max-width:500px;
}
td{
    width:50%;
    display:inline-block;
    margin:0;
    padding:0;
}

<table>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>
<tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
</tr>
</table>
&#13;
&#13;
&#13;

所需的布局:

enter image description here

2 个答案:

答案 0 :(得分:5)

您还需要重置<tr>显示。

table{
    width:100%;
    table-layout:fixed;
    max-width:500px;
}
tr {
    display:inline;
    font-size:0;/* kind of erase white-space */
}
td{
    width:50%;
    display:inline-block;
    margin:0;
    padding:0;
    font-size:1rem/* reset font-size*/;
      /* show me*/ box-shadow: 0 0 0 1px;
}
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

答案 1 :(得分:0)

您正在尝试的实际上是非表格布局,您只是使用表格元素。

要使表格布局看起来像这样,请在每行中放置两个单元格:

table{
    width:100%;
}
<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
  </tr>
</table>