Question

大家好，我需要在多行中输入td值，这些行都在一个tr内。我试过这样但却无法实现它。

<table class="table">
<tr style="margin-bottom:10px;border:5px solid lightgrey;width:700px">
<td style="width:500px">.... </td>
<td style="width:300px">.... </td>
<td style="width:500px">.... </td>
</tr>
</table>

我认为，由于提到的tds宽度，它将包裹到下一行，但它不是。即使增加td宽度超过700px后，我也无法得到预期的输出。请帮我解决这个问题。

Answer 1

将TD元素设置为display: block;，这会强制它们换行：

.table td { display: block; }

示例：jsFiddle

Answer 2

用于第一行：

table tr td:nth-child(1)
{
  background-color:red;
}

用于第二行：

table tr td:nth-child(2)
{
  background-color:yellow;
}

等。

支持IE 7＆amp; 8你需要使用：

td:first-child + td

第一行第二行

td:first-child + td + td

为第3次。

等。

要支持IE6，您需要使用Javascript。

$(function() {
    $('td:first-child').addClass("Class1");
    $(".table-class tr").each(function() {
        $(this).find('td:eq(1)').addClass("Class2");
        $(this).find('td:eq(2)').addClass("Class3");
    });
});

这将添加一个可以调用的类

Answer 3

你的意思是这样......

TD1
  TD2
  td3

如果，为什么不使用

<table>
    <tr>
        <td>TD1</td>
    </tr>
    <tr>
        <td>TD2</td>
    </tr>
</table>

如果你想在一个tr

中对tds进行分组

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <td>TD1</td>
                </tr>
                <tr>
                    <td>TD2</td>
                </tr>
                <tr>
                    <td>TD3</td>
                </tr>
            </table>
        </td>
    <tr>
<table>

顺便说一句，如果这不是必须使用td作为 tds信息，你可以试试这个：

<table>
    <tr>
        <td>
            TD1 information<br/>
            TD2 information<br/>
            TD3 information<br/>
        </td>
    <tr>
<table>

在多行中输入tds，这些行都在一个tr内

3 个答案: