2

こんにちは、すべて単一の tr 内にある複数の行に td 値を入力する必要があります。私はこのように試みましたが、達成できませんでした。

<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 の幅のため、次の行に折り返されると思いましたが、そうではありませんでした.700px を超えて td 幅を増やした後でも、期待される出力を得ることができませんでした. これを修正するのを手伝ってください。

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 を 1 つの tr にグループ化したい場合

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

ところで、これがtds 情報に td を使用する必要がない場合は、これを試すことができます:

<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;
}

2 行目に使用します。

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

など。

IE 7 & 8 をサポートするには、以下を使用する必要があります。

td:first-child + td

最初の 2 行目

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 に答える