table幅を100%にする方法

  • このトピックには4件の返信、1人の参加者があり、最後にRobertconにより3ヶ月、 2週前に更新されました。
4件の返信スレッドを表示中
  • 投稿者
    投稿
    • #44005 返信
      阿部
      ゲスト

      このようなtableを作りたいのですが、テキスト量に応じて、最小幅のwidthになってしまいます。カラム幅いっぱいにtable幅を広げたいのですが、小テーマのCSSはどのように追記すれば良いでしょうか。初歩的ですみませんm(__)m

      <table>
      <tbody>
      <tr>
      <th>aaa</th>
      <th>bbb</th>
      </tr>
      <tr>
      <td>xxx</td>
      <td>yyy</td>
      </tr>
      </table>

    • #44007 返信
      Hidekichi
      ゲスト

      サンプル: テーブル幅100% | jsFiddle

      これだけの事ですが、今現状で阿部さんのサイトにどのようなcssが適用されていて、どのようなcssが影響しているかわからないとこれ以外にも手を入れる必要があるかも知れません。

      他に、tableにclassを入れて、例えば、

      <table class="w100">
        //その他のプロパティ
      </table>

      このようなhtmlにし、

      .w100 {
        width: 100%;
        border-collapse: collapse;
      }
      
      .w100 th,
      .w100 td {
        border: 1px solid #ccc;
      }

      と言うcssにしても良いかと思います。そうすれば、デフォルトのテーブルと使い分けができます。

    • #44075 返信
      阿部
      ゲスト

      ありがとうございます!
      上記のとおり子テーマCSSの追記とhtml編集しましたが、変化ないですね。。
      ほぼ標準のsimplicityからカスタマイズはしてないのですが。
      なんのCSSが影響しているか分からず、すみません。。

    • #44076 返信
      阿部
      ゲスト

      たびたびすみません。

      >サンプル: テーブル幅100% | jsFiddle

      こちらのCSSに追記のみの方法で出来ました!!!
      ありがとうございました!助かりました。

    • #44078 返信
      Hidekichi
      ゲスト

      サンプルのままだとページ内の全てtableは100%で表示になってしまうので、前レスのように必要なtableにクラスを追加する方をオススメします。あるいは、

      #the-content table {
        //そのプロパティ
      }

      等のように、記事の中のtableだけというように限定的に利用されるのが良いかと思います。

4件の返信スレッドを表示中
返信先: table幅を100%にする方法
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)