0

別の表の行にある場合でも、CSS を使用して、同じクラスが互いに下にあるすべてのものを並べることができれば、私はうんざりしますか? すべてのVSを互いに下に配置し、次にチームをそれらの左側と右側に配置したいと考えています。

<tr>
    <td>Some info</td>
    <td>Some info</td>
    <td id="teams"> A team <span class="vs">VS</span> Another Team</td>
    <td>Some Info</td>
</tr>
<tr>
    <td>Some info</td>
    <td>Sine info</td>
    <td id="teams"> A team name <span class="vs">VS</span> Another Team name</td>
    <td>Some Info</td>
</tr>

今はこのようになっています:

ここに画像の説明を入力

そして、私はそれを次のようにしたい:

ここに画像の説明を入力

4

2 に答える 2

2

現在所有している TD を 3 つの個別の TD に分割できます。

于 2013-09-29T13:42:58.780 に答える
1

これtdを3つに分けて対応する上tdで使用colspan="3"しthます。

それを見てくださいWorking Fiddle

これは基本的なレイアウトです。必要に応じて変更してください。

HTML:

<table border="1">
    <tr>
        <th>info 1</th>
        <th>info 2</th>
        <th  colspan="3"> A team VS Another Team</th>
        <th>info 3</th>
    </tr>
    <tr>
        <td>Some info</td>
        <td>Some info</td>
        <td class="teams left">A team</td>
        <td class="vs">VS</td>
        <td class="teams right">Another Team</td>
        <td>Some Info</td>
    </tr>
    <tr>
        <td>Some info</td>
        <td>Some info</td>
        <td class="teams left">A team name</td>
        <td class="vs">VS</td>
        <td class="teams right">Another Team name</td>
        <td>Some Info</td>
    </tr>
</table>

CSS:

table
{
    width: 100%;
}
td
{
    text-align: center;
}
th:nth-child(3)
{
    column-span: 3;
}
.teams
{
    color: red;
}
.vs
{
    color: green;
}
.left
{
    text-align: right;
}
.right
{
    text-align: left;
}
{
    color: green;
}
于 2013-09-29T19:22:46.803 に答える