Movable Type tableのCSSを上書き調整

MT6にしてから、記事内の table が幅いっぱいに広がり、セル内のスペースが余裕ありすぎになってしまった。Rainier でベースになっているCSS、mt\mt-static\support\theme_static\rainier\css\base.css を確認してみたら、table にいろいろ設定してあった。

table {
  width: 100%;
  margin: 1.618em 0;
  border-spacing: 0;
  border: 1px solid #c0c6c9;
  border-width: 1px 0 0 1px; }
  table th,
  table td {
    padding: 0.5em;
    border: solid #c0c6c9;
    border-width: 0 1px 1px 0;
    text-align: left;
    vertical-align: top;
    word-wrap: break-word; }
  table th {
    background-color: #dcdddd;
    color: #2b2b2b; }

Rainier の構成にはどこにも table は使われてないっぽいのだけどな。仕方ないので、table のCSSを後から読み込むようにして、上書きすることにした。

ルートにある styles.css の下の行に以下を追記する。

@import url(追加読み込みするCSSのURL);

追加読み込みするCSSは以下のようにした。

table,tr,td {
  width: auto;
}

table .TableAdjust {
  border-collapse: collapse;
  border: 1px solid #8F8F8F;
  border-spacing: 0px;
  margin: 0px;
  padding: 0px;
}

.TableAdjust td {
  border: 1px solid #8F8F8F;
  border-spacing: 0px;
  margin: 0px;
  padding: 2px;
}

知らないどこかで table が使われているかもしれないので、table すべてに影響するのは width だけに留め、他に影響しないよう、記事中の table には TableAdjust というように class を割り当てて置いた。

コメント(0) トラックバック(0)