2017年02月

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

tableの1行目をcolspanで結合したら2行目のセルのサイズが効かなくなっちゃったのを解決

例えば

<table>
<tr>
<th colspan="2">あいうえお</th>
</tr>
<tr>
<td width="80">住所</td>
<td>アメリカ</td>
</tr>
</table> 

というソースがあったとして、住所のセルは横幅80pxの小さいセルにしたいのに、なぜか、横幅50%まで自動的に大きくなっちゃう問題。

おきるときと起きないときが あって。

なんでだろうな、と思っていたら、tableにかけているcssのせいだった。



table{
table-layout: fixed;

↑こいつが悪い 

たまに横幅をしっかり決めたいために、table-layout:fixedつかうことがあったんだけど、これをやると、colspan="2"とかやったときにwidthがきかなくなっちゃうようだ。

しょうがないので、table-layout:fixedをはずして解決。

WEBシステムの画面をコーディングする際などには、セル結合はよく使うのではずしておいたほうがよい
という知見。

 

長い英単語をいれるとtableの中をつきぬけちゃう

長い英単語がthやtdの中に入るとつきぬけちゃうし、tableの各セルの横幅もグダグダになっちゃう。
いろいろ調べて、シンプルに解決したのはこれ

table{
word-break: break-all;

cssの説明は別のサイトでみてね。

結局どうしたらいいのよっていうのがわからないところが多かったけど結局解決はtableにword-break:break-all;

をつける、でした。
 

イラレでスライスを速くするスクリプト。quick exporterが便利

イラレで作られたデザインのスライス、psdの5倍時間かかるな、なんとかならねぇのかよ。

と思っていた。

これを見つけた。

quick exporter
http://2-hats.hateblo.jp/entry/2015/07/27/120859

知らなかったよ・・
これを知らずにいままで1個1個切り分けてスライスしてたなんて、おれたちオラウータンじゃないか。 

psdと同じ速度でスライスできる! 
記事検索

リモキュー

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

https://twitter.com/tacshock
タグクラウド
QRコード
QRコード
  • ライブドアブログ