Question

我需要在一行中显示多行而不使用＆＃34; TR＆＃34;标签

这是必要的，因为我在我的JSP上应用sortabletable.js，所以在排序要被视为单个实体的行时，它会失败。

我尝试了以下内容：

<table style="display:inline-block" width="90px">
    <tr>
        <td width="30px">1</td>
        <td width="30px">1</td>
        <td width="30px">1</td>
    </tr>


    <tr>
        <td width="30px">1</td>
        <td width="30px">1</td>
        <td width="30px">1</td>
    </tr>


    <tr>
        <td width="30px">1</td>
        <td width="30px">1</td>
        <td width="30px">1</td>

        <td width="30px">2</td>
        <td width="30px">2</td>
        <td width="30px">2</td>

        <td width="30px">3</td>
        <td width="30px">3</td>
        <td width="30px">3</td>

    </tr>

</table>

通过限制行和表长度，可以将第3行中的TD包装成3行吗？

以下代码工作正常：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style>
#table_id  {display: block; }
#table_id  td {display: inline-block;float:left; }
</style>


<table id="table_id" style="width:55px;table-layout:fixed" border="1">


<tr>

<td>1</td>
<td>1</td>
<td>1</td>

</tr>


<tr>

<td>1</td>
<td>1</td>
<td>1</td>

</tr>


<tr>

<td>1</td>
<td>1</td>
<td>1</td>

<td>2</td>
<td>2</td>
<td>2</td>

<td>3</td>
<td>3</td>
<td>3</td>

</tr>

</table>

Answer 1

以下是使用嵌套表格执行此操作的方法：Fiddle

<td width="30px">
  <table>
    <tr><td width="30px">3</td></tr>
    <tr><td width="30px">4</td></tr>
    <tr><td width="30px">5</td></tr>
  </table>
</td>

这里没有嵌套表：

<td width="30px" style="white-space: pre;">
  3
  4
  5
</td>

Fiddle

还通过宽度限制：

<td style="word-break:break-word;width:10px;">345</td>

Fiddle

通过包装TD标签显示新行而不使用html页面

1 个答案: