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

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

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

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

Q&A

解決済

2回答

1245閲覧

「flex-direction:column」によるテーブルの高さを文字数に応じて自動で調整したいです。

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

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

0グッド

0クリップ

投稿2017/08/13 09:12

###■やりたいこと
現在このようなテーブルがあります。
https://jsfiddle.net/euyo9kvk/

ご覧のように、右列のピンク文字数によって、ピンクの高さだけが変わってしまいます。

このとき、左列の黄色の高さが調整されるようにしたいのです。

###■ダメなこと
たとえばこう書けば黄色もピンクも揃いますが、

css

1.Table th, .Table td{ 2 height: ●●px; 3}

ピンクの文字数はしょっちゅうかわるのです。
なので、黄色がピンクに合わせて自動で調整されてほしいのです。

宜しくお願い致します。

###■ここまでの概要
![イメージ説明

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

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

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

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

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

guest

回答2

0

提示のHTMLでは「自動で」は無理です。

ここ1週間ほどの質問内容から、PHPを外部化する方法を採られているのはわかりますが、そもそもどういったデータをどう外部化して使うか、またそれが妥当な方法なのかは検証されていますか?

includeしたファイル内でechoする方法では汎用性に欠ける為、データとして受け取るようにするなど、組み換えは可能だと思いますよ。

投稿2017/08/13 16:37

kei344

総合スコア69364

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

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

退会済みユーザー

退会済みユーザー

2017/08/13 17:22

いいえ、これっぽーーっちも検証しておりません。わくわく作りながら、そういえばあれもしたい、おっとこれもしたいぞ、そんな連続です。笑 >includeしたファイル内でechoする方法では汎用性に欠ける為、データとして受け取るようにする とおっしゃいますと、includeしてひっぱるのではなく、データーベースに入れたやつをひっぱる方が汎用性広いぞ~、ということでしょうか。 MySQLとやらにログインしたところでギブアップでした。。 ならば今回の質問はあきらめましょう。とりあえず別の回答者さんをBAにさせて頂きます。 いつもご指摘ありがとうございます。<(_ _)> おやすみなさい。
guest

0

ベストアンサー

試していないので、希望の形になるか分かりませんが、パッと見で。

<thead>タグをなくして、行列を逆にしてはいかがでしょう。

html

1<tr> 2 <th class="thcol">1</th> 3 <td class="tdcol"> 4 <ul> 5 <li><span>最初</span></li> 6 <li><span>さいしょ</span></li> 7 </ul> 8 <td> 9</tr> 10<tr> 11:: 12</tr>

投稿2017/08/13 12:31

編集2017/08/13 12:32
tomari_perform

総合スコア760

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

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

退会済みユーザー

退会済みユーザー

2017/08/13 14:10 編集

なるほど!できますね!どうもありがとうございます! しかし実は、HTMLの構造のうち、theadとtbodyの分解だけは変えないように対処したいのです。 その部分はPHPで別のファイルから引っ張ったりしていて、ちょっと変えられない事情ありでして… すみませんせっかく<(_ _)> そもそも質問文に書いておかなければならないことでした。
退会済みユーザー

退会済みユーザー

2017/08/13 14:11

なるほど!できますね!どうもありがとうございます! しかし実は、HTMLの構造のうち、theadとtbodyの分解だけは変えないように対処したいのです。 その部分はPHPで別のファイルから引っ張ったりしていて、ちょっと変えられない事情ありでして… すみませんせっかく<(_ _)> そもそも質問文に書いておかなければならないことでした。
tomari_perform

2017/08/13 14:13

であれば、考え方だけ書くと、javascriptで、tbodyの各行の高さを取得して、その高さをtheadの各行に反映させるとか、ですかね。
退会済みユーザー

退会済みユーザー

2017/08/13 14:17

それはうへぇですね。javascriptはコピペでしか触ったたことがないので、今回はCSSでなんとかご回答を頂けないか、もちょっと待ってみます。 ご回答くださったのに後付けの条件で文句言って本当に申し訳ございません。(>_<)
tomari_perform

2017/08/13 16:01

HTML + CSSには限界があるので、JavaScriptも使えるようにはなった方が良いですよ。 まぁ、癖が強い言語で、HTML側を修正できるのであれば、今回は不要ですが。 > theadとtbodyの分解だけは変えない > CSSのみ ⇒んー…。(tableタグにflexが付与され、/←なくてもいいはず)  trタグにもflexが付与されている状況だと、  それぞれのtrの高さは別物扱いされているので、  (colgroupタグやrowgroupタグ等を追加したとしても)  高さをCSSのみでpx指定せず自動で合せるのは、  ブラウザ側のtableタグとdisplay:flex;を同時に使った場合に対する  仕様変更がない限り、難しい気がします。 JavaScript使わずに対応したくて、PHPで引っ張ってきているなら、 データの出力順を変えたりしてHTML側を編集して解決するのが 一番修正量が少なくて良いとは思いますが、 それでもPHP側も修正できない(?)となると、 やはりJavaScriptに戻ってしまいます。 まぁ、あと思いつく内容としては、仕様変更で、 「1,2,3をthead(1行目)にしてもらう(tableタグ内でdisplay:flexを使わないようにする)。」 「高さを固定で良しとする」 「セル内にスクロールを付与して高さを固定にする」 とかでしょうか。
退会済みユーザー

退会済みユーザー

2017/08/13 17:24

なるほど、できなそうですね。残念(>_<) お手を煩わせてしまい申し訳ございませぬ。 今回はあきらめます。 質問内容についての正解をくださったのでBAにさせて頂きます。 どうもありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問