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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Bootstrap

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

Q&A

3回答

2322閲覧

【bootstrap】bootstrapでtdを100%にしたい

horo

総合スコア12

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Bootstrap

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

0グッド

0クリップ

投稿2017/05/01 09:45

###概要
現在bootstrapを使用してコーポレートサイトのレスポンシブ化をしていますが、
safariの時のみ表のtdが「width="100%"」にならず困っています;;
どなたか助けていただけますでしょうか?>_<

###発生している問題
PCサイズ時は問題ありません。
レスポンシブでsafari(もしくはios)時のみスマホサイズ~タブレットサイズ時(width:~768px)に
表のth,tdが「width="100%"」になりません。
文字が少ないと空いてしまいます。

###発生している問題のスクリーンショット

■safari時(問題の方)
イメージ説明

■chromeなど他のブラウザ時(正常時)
イメージ説明

###ファイル構成と該当のソースコードについて
サイトはwordpressとbootstrapを使用して作成しています。
表はbootstrapの記述を使わずに、htmlで書いています。

html

1<div class="main_con"> 2 <table> 3 <tr> 4 <th>創立年月日</th> 5 <td>平成9年 (1997年)7月15日</td> 6 </tr> 7 <tr> 8 <th>資本金</th> 9 <td>1000万円</td> 10 </tr> 11 </table> 12</div>

使ったcssは「bootstrap.min.css」と下記のcssになります。

lang

1//こちらは自分で書いたcssです。 2 3/*table 4------------------------------------------------*/ 5.main_con table { 6 width: 100%; 7 border-top: #ccc 1px solid; 8 border-left: #ccc 1px solid; 9 margin-bottom: 20px; 10 border-collapse: collapse; 11 table-layout: fixed; 12 word-wrap: break-word; 13} 14.main_con table th { 15 background-color: #eeeeee; 16 width: 30%; 17} 18.main_con table td { 19 width: 70%; 20 white-space: normal; 21} 22.main_con table th, .main_con table td { 23 border-bottom: #ccc 1px solid; 24 border-right: #ccc 1px solid; 25 padding: 15px; 26 text-align: left; 27 vertical-align: middle; 28 line-height: 1.5; 29} 30 31.table_caution { 32 color: #244673; 33 font-size: 0.85rem !important; 34} 35@media screen and (max-width: 768px) { 36.main_con table { 37 font-size: 0.825rem; 38 width: 100%; 39 margin: 0 auto 20px; 40} 41.main_con table tbody, 42.main_con table tr, 43.main_con table th, 44.main_con table td{ 45 display:block; 46 width: 100%; 47} 48.main_con table td{ 49 width: 100%; 50 display:block; 51} 52.main_con table th { 53 border-top: none; 54 border-bottom: none; 55} 56}

lang

1//こちらは使用したリセットcssです。 2 3@charset "utf-8"; 4 5/* ----------------------------------------------------------------------- 6reset 7------------------------------------------------------------------------- */ 8 9html, body, div, span, object, iframe, 10h1, h2, h3, h4, h5, h6, p, blockquote, pre, 11abbr, address, cite, code, 12del, dfn, em, img, ins, kbd, q, samp, 13small, strong, sub, sup, var, 14b, i, 15dl, dt, dd, ol, ul, li, 16fieldset, form, label, legend, 17table, caption, tbody, tfoot, thead, tr, th, td, 18article, aside, canvas, details, figcaption, figure, 19footer, header, hgroup, menu, nav, section, summary, 20time, mark, audio, video { 21 margin:0; 22 padding:0; 23 border:0; 24 outline:0; 25 font-size:100%; 26 vertical-align:baseline; 27 background:transparent; 28} 29 30body { 31 line-height:1; 32} 33 34article,aside,details,figcaption,figure, 35footer,header,hgroup,menu,nav,section { 36 display:block; 37} 38 39nav ul, 40li { 41 list-style:none; 42} 43 44blockquote, q { 45 quotes:none; 46} 47 48blockquote:before, blockquote:after, 49q:before, q:after { 50 content:''; 51 content:none; 52} 53 54a { 55 margin:0; 56 padding:0; 57 font-size:100%; 58 vertical-align:baseline; 59 background:transparent; 60} 61

###自力で試した・調べたこと
■safariでthにdisplay:blockは効かないのか?
→bootstrapを使用していない他のサイトを参考に見てみましたら普通に見れましたので、
bootstrapが問題かもしれない?

■cssでtableタグに「display:block」を追加
→thが100%表示になりましたが、tdは直らず…。

■固定幅にしないとだめかと思い、tableに「table-layout: fixed;」を追加
→効いているのかわからず。

■固定幅(px幅指定)にしたらどうなるか
→効きましたが一番小さいサイズに合わせているため、大きめのサイズ画面で見た際見づらい

###補足情報(言語/FW/ツール等のバージョンなど)
■使用言語・ツール:php/html5/css3/js/wordpress/bootstrap
■コーディング:dreamweaver
■使用FTP:filezilla
■確認ブラウザ:chrome/safari/firefox/ie

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

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

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

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

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

guest

回答3

0

html

1<!-- Latest compiled and minified CSS --> 2<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 3<link rel="stylesheet" href="使用したリセットcss.css"> 4<link rel="stylesheet" href="自分で書いたcss.css"> 5<script src="//code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 6<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 7

WP用Bootstrapではないですが問題なく表示されました
CSSのキャッシュではないでしょうか?

PHP

1 .css?<?php echo time(); ?>"

してみたらどうでしょう?

投稿2017/05/01 11:42

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

horo

2017/05/01 13:23

>dotさん 回答ありがとうございます。 入れてみましたが変化ありませんでした。 .css?<?php echo time(); ?>" ↑この記述はテンプレートファイルのどこに記述すればよろしいでしょうか?
TakeoAsai

2017/05/01 13:51

<link rel="stylesheet" href="自分で書いたcss.css?<?php echo time(); ?>"> としてやれば、アクセスするたびにCSSファイルのパスが変わるので、毎回読み込まれCSSのキャッシュが悪さしなくてすむ、ということでしょう
退会済みユーザー

退会済みユーザー

2017/05/01 22:03

TakeoAsaiさん追記ありがとうございます iosサファリのキャッシュは強力なので 後でcssを書き換えても書き換え前のcssファイルをいつまでも 取り込んだりするのでもしかしてと思いました
horo

2017/05/04 02:05

>dotさん、TakeoAsaiさん 回答ありがとうございます。 入れてみましたが変わりませんでした;;
退会済みユーザー

退会済みユーザー

2017/05/04 03:35

なんでしょね 自分のiphone ios10.2では問題なく表示されてますね
guest

0

bootstrapを使っているなら大丈夫とは思いますが、DOCTYPE宣言はありますか?

html

1<!DOCTYPE html> 2<html> 3 <head></head> 4 <body></body> 5</html>

投稿2017/05/16 03:04

gin

総合スコア2722

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

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

0

こんにちは。

safari(もしくはios)時のみスマホサイズ~タブレットサイズ時(width:~768px)に

これって、かなり答えづらい質問です。

サンプルURLを出していただくことは可能ですか?
それでしたら、実機で検証してくださる方が出られると思います。

投稿2017/05/07 21:12

ajisaiplanning

総合スコア15

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

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

horo

2017/05/09 01:03

>ajisaiplanningさん 回答ありがとうございます。 答えづらい質問で申し訳ありません;; サンプルURLについては社内の機密が関わっているためお出しするのが難しいです。。
ajisaiplanning

2017/05/09 01:23

そこだけ切り取ったHTMLを作ってみるなどしてみると、解決策が見えてくるかもしれませんよ。 もしかしたら、ここで掲載されているソース以外のところの問題かもしれないです。 もしまだ悩んでいるようでしたら、デバッグ手法の参考まで。m(__)m
horo

2017/05/09 13:13

>ajisaiplanningさん ありがとうございます。 一度切り取って試してみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問