2

大家好，我需要在多行中输入 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 以上，我也无法获得预期的输出。请帮我解决这个问题。

4

3 回答 3

4

将您的TD元素设置为display: block;将强制它们进入新行：

​.table td { display: block; }​

示例：jsFiddle

于 2013-01-02T09:22:32.787 回答
1

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

td1
td2
td3

如果，你为什么不使用

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

或者，如果您想将 tds 分组到一个 tr

<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>
于 2013-01-02T09:20:05.180 回答
0

用于第一行：

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

用于第二行：

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

等等。

要支持 IE 7 和 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");
    });
});

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

于 2013-01-02T09:17:41.767 回答