質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

1回答

3080閲覧

BOOTSTRAP利用 レスポンシブ対応しTABLEが必要以上ぴょんと伸びないよう設定したい

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2019/08/03 03:22

編集2022/01/12 10:55

お世話になります。以下ご確認頂ければ幸いです。どうぞ宜しくお願いいたします。

横幅が985pxを超えたあたりでTableがずれてしまいます。
イメージ説明

画面をレスポンシブ対応にしたいです。具体的に以下サイトで書かれているように設定したいです。
ためしたところ(ソースは後述) レイアウトがずれてしまいます。
参考にしたのは「横並びを縦並びにするテーブルレスポンシブ」という見出しの部分になります。
https://b-risk.jp/blog/2018/07/table-css/

#ためしたこと
CSS部分とHTMLについて記載させて頂きます。レスポンシブ該当は@media screen and (max-width: 640px) { .tbl-r03 {になります。

.a1 { background-color: #98d98e; height: 120px; padding: 20px; } .b1 { background-color: #e4de8a; padding-left: 20px; height: 40px; text-align:left; font-size: 18pt } /* BOOTSTRAPのTABLEを中央揃え*/ .tablecenter { .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > th { vertical-align: middle; text-align: center; width: 100%; table-layout: fixed; word-break: break-all; word-wrap: break-all; } /* 部署と資格で検索する*/ .search-form { padding: 10px; } .table { width: 100%; table-layout: fixed; word-break: break-all; word-wrap: break-all; } p { font-size: 16px; font-weight: bold; text-align: center; margin: 60px auto 40px; } th { background: #e9727e; border: solid 1px #ccc; color: #fff; padding: 10px; } td { border: solid 1px #ccc; padding: 10px; } @media screen and (max-width: 640px) { .tbl-r03 { width: 90%; } .tbl-r03 tr { display: block; float: left; } .tbl-r03 tr td, .tbl-r03 tr th { border-left: none; display: block; height: 50px; } .tbl-r03 thead { display: block; float: left; width: 30%; } .tbl-r03 thead tr { width: 100%; } .tbl-r03 tbody { display: block; float: left; width: 70%; } .tbl-r03 tbody tr { width: 50%; } .tbl-r03 tr td + td { border-left: none; } .tbl-r03 tbody td:last-child { border-bottom: solid 1px #ccc; } }

HTMLの指定は以下となります。

<table class="tbl-r03"> <thead> <tr> <th>見出し01(th)</th> <th>見出し02(th)</th> <th>見出し03(th)</th> <th>見出し04(th)</th> </tr> </thead> <tbody> <tr> <td>内容(コンテンツ)上</td> <td>内容(コンテンツ)上</td> <td>内容(コンテンツ)上</td> <td>内容(コンテンツ)上</td> </tr> <tr class="last"> <td>内容(コンテンツ)下</td> <td>内容(コンテンツ)下</td> <td>内容(コンテンツ)下</td> <td>内容(コンテンツ)下</td> </tr> </tbody> </table> <!-- <table class="table table-bordered mt-4"> --> <div class='tablecenter'> <table class="table" "tbl-r03"> <thead class="thead-light"> <tr> <th>lineuser_id</th> <th>lineuser_name</th> <th>time01</th> <th>time02</th> <th>event_type</th> <th>text_no</th> <th>text_content</th> </tr> </thead> <tbody> <tr> {% for employee in employee_list %} <th scope="row">{{ employee.lineuser_id }}</th> <td>{{ employee.lineuser_name }}</td> <td>{{ employee.time01 }}</td> <td>{{ employee.time02 }}</td> <td>{{ employee.event_type }}</td> <td>{{ employee.text_no }}</td> <td>{{ employee.text_content }}, {% endfor %}</td> </tr> </tbody> </table> </div> <!-- 余白の為tableを閉じる--> <!-- <div class='tablecenter'> <table class="table table-bordered mt-4 phone-table"> --> <div class='tablecenter'> <table class="table" "tbl-r03"> <thead class="thead-light"> <tr> <th>ID</th> <th>姓</th> <th>名</th> <th>メール</th> <th>資格名称</th> <th>部活</th> </tr> </thead> <tbody> <tr> {% for employee in employee_list %} <td>{{ employee.pk }}</td> <td>{{ employee.last_name }}</td> <td>{{ employee.first_name }}</td> <td>{{ employee.email }}</td> <td>{{ employee.department }}</td> <td>{% for licence in employee.licence.all %}{{ licence }},{% endfor %}</td> </tr> {% endfor %} </tbody> <br> </table> </div>

今回参考にさせて頂きましたサイトです。
https://www.netimpact.co.jp/diary/20607/
https://b-risk.jp/blog/2018/07/table-css/

御手数をおかけしますが宜しくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

BootstrapでTableをレスポンシブにするならば、以下のようにするのが一般的でいいかもです。

HTML

1<table class="table table-responsive">

投稿2019/08/03 04:10

hatsu

総合スコア1809

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/08/03 05:45

ありがとうございます。 <div class="table-responsive"> https://cccabinet.jpn.org/bootstrap4/content/tables 上記サイトを参考にしました。<div class="table-responsive">このdivを追記すればtableのはみだしはなくなりますか?
hatsu

2019/08/03 06:01

そうですね。table-responsiveクラスでtableクラスを覆うのが適切な使いなので、 > <div class="table-responsive">このdivを追記 ではみ出すのは無くなります。 また現在tablecenterというクラスでtableをすでに覆っているので <div class='tablecenter'>を <div class='tablecenter table-responsive'> と書き換えてあげることでも解決できるかと思います。
退会済みユーザー

退会済みユーザー

2019/08/03 07:13

ありがとうございます。早速確認させて頂きました。確かにテーブルがはみだす事はなくなりましたが、テーブルの内容が切れてしまいます。そこで今回質問にあげさせていただきました以下方法を追記しているのですがレスポンシブになりません。 やりたいこと https://b-risk.jp/blog/2018/07/table-css/ の 「横並びを縦並びにするテーブルレスポンシブ」という見出し部分です。 テストURLになります。 http://mojikoi.xyz/ 宜しくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問