0

これは私が達成しようとしていることです：

|---------| |----------|
| TableC1 | | TableC2  |
|---------| |----------|
     |------------|
     | TableC3    |
     |------------|

これを超えると、私が達成しようとしていることがわかります。TableCell1とTableCell2はテーブルの中央にうまく配置されていますが、その下にテーブルセルを1つだけ配置したいので、TableCell3はどちらかの側に移動します。左右は関係ありません。

これは私がそれを書いた方法の抜粋です：

HTML：

<table id = "some-boxes">

<tr>
<td id = "first-box">
SOME TEXT101
</td>

<td id = "second-box">
SOME TEXT202
</td>
</tr>

<td id = "third-box">
SOME TEXT303
</td>
</table

CSS：

#first-box{
   width: 100px;
}
#second-box{
   width: 100px;
}
#third-box{
   width: 200px;
   text-align: center;
   margin-left: 50%;
   margin-left: 50%;
}

誰かが私のこの謎に答えてくれることを願っています。よろしくお願いします:)

4

4 に答える 4

5

タグが占める列の数を指定するために使用colspanします。<td>

<td id = "third-box" colspan="2">
SOME TEXT303
</td>

これが視覚的な例です。境界線を有効にしてデモンストレーションしました：http： //codepen.io/AlienHoboken/pen/uFlIC

また、マージンルールを取り除くことができます。

于 2013-01-15T21:56:27.340 に答える
0

まず、<tr></tr>タグをラップしてテーブルを修正する必要があります<td id="third-box">...</td>。次に、colspan内の属性を使用する必要があります#third-box。

<table id="some-boxes">
    <tr>
        <td id="first-box">
            SOME TEXT101
        </td>
        <td id="second-box">
            SOME TEXT202
        </td>
    </tr>
    <tr>
        <td id="third-box" colspan="2">
            SOME TEXT303
        </td>
    </tr>
</table>

上記の例では、2行目に全テーブル幅の3番目のセルが表示されます。ただし、「図面」（同じサイズで2行目の中央にある3番目のセル）で正確なテーブルを作成する場合は、次のようになります。

<table id="some-boxes">
    <tr>
        <td id="first-box">
            SOME TEXT101
        </td>
        <td id="second-box">
            SOME TEXT202
        </td>
    </tr>
    <tr>
        <td id="third-box" colspan="2">
            <div id="third-box-inner">
                SOME TEXT303
            </div>
        </td>
    </tr>
</table>

追加のCSSデクレレーションあり：

div#third-box-inner
{
    width: 100px;
    text-align: center;
    margin-left: 50px;
}

もう1つの提案：HTML属性を設定するときに、等号の前後にスペースを使用しないでください。

お役に立てれば。

于 2013-01-15T22:15:05.537 に答える
0

テーブルセルは、マージンまたはオブジェクトの配置規則に従いません。彼らはテーブルの中で位置を定義しました。行2の最初のセルは、常に行1の最初のセルの下から始まります。を使用してセルを2列にまたがらせることができますがcolspan=2、列にまたがる数学ゲームをプレイしない限り、別のセルに部分的に重なることはできません。アイテムにCSSポジショニングを使用することをお勧めしdivます。

于 2013-01-15T21:57:24.693 に答える
0

マークアップを変更できない位置にいる場合、これは機能します。

http://jsfiddle.net/Aam6T/

table#some-boxes, table#some-boxes tr {
  display: block;
  text-align: center;
}

table#some-boxes td {
  display: inline-block;
  border: 1px solid;
}

ただし、前の行のセルはもう整列しません。

于 2013-01-15T22:11:33.000 に答える