【CSS】テーブルの幅固定について

Question

テーブルの幅を固定する方法について。

現在、各データを入れ込むテーブルを作成しております。

スクロール対応の為、display:brock;を使用しています。

データの文字数ごとに数pxのズレが起きてしまいます。
データの値が指定幅を超えると、収まるように自動で幅が広がってしまうので
max-width、min-widthで同じ数値を指定したところ
幅が動くことなく、問題は今のところ無いです。

この方法が適切なものか、他の記述方法などがございましたら、ご教授お願いいたします。

現在実装中の再現コードになります。

<table>
      <thead>
　　　　    <tr>
               <th width="30">ID</th>
               <th width="100">名前</th>
　　　　    </tr>
      </thead>

      <tbody>
           <tr>
               <td>12345678</td>
               <td>手良 帝流</td>
           </tr>
           <tr>
               <td>9999</td>
               <td>目賀 帝流子</td>
           </tr>
      </tbody>
</table>

table {
    width:130px;
}
thead {
    display: block;
    width: 130px;
}
tbody {
    display: block;
    width: 147px;
    overflow-y: scroll;
}
tbody td:nth-child(1){
    min-width: 30px;
    max-width: 30px;
    // ↓ 文字数がオーバーしたとき"…"ではみ出した文字を省略
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
tbody td:nth-child(2){
    min-width: 100px;
    max-width: 100px;
    // ↓ 文字数がオーバーしたとき"…"ではみ出した文字を省略
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

ID	名前
1234...	手良 帝流
9999	目賀 帝流子

Comments

[yoshinavi]

「width」の指定で、ズレが発生する「table全体のコード」を提示されると良いかと思います。

[Pickerchu]

ご指摘ありがとうございます。
修正いたします。

Answer 1

親要素によりますがdisplay:block;でblock化してはどうですか？

table td:nth-child(1){
    display:block;
    min-width: 30px;
    max-width: 30px;
    // ↓ 文字数がオーバーしたとき"…"ではみ出した文字を省略
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
table td:nth-child(2){
    display:block;
    min-width: 60px;
    max-width: 60px;
    // ↓ 文字数がオーバーしたとき"…"ではみ出した文字を省略
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Comments

[Pickerchu]

回答ありがとうございます。
コメントで指摘されたのですが、tableのコードを表記せず説明不足でした。、
tableの方でtheadとtbodyでdisplay:brockを行っています。
理由はtbodyのスクロールの為です。
説明が足らず、申し訳ございません。

Answer 2

データの文字数ごとに数pxのズレが起きてしまいます。

文字列を特定の長さに切れば？Javascript少し触るけど、これならカット出来る。

/**
 * 文字列のバイト数を取得する
 * @return {int}
 */
String.prototype.bytes = function () {
//https://zukucode.com/2017/04/javascript-string-length.html
  var length = 0;
  for (var i = 0; i < this.length; i++) {
    var c = this.charCodeAt(i);
    if ((c >= 0x0 && c < 0x81) || (c === 0xf8f0) || (c >= 0xff61 && c < 0xffa0) || (c >= 0xf8f1 && c < 0xf8f4)) {
      length += 1;
    } else {
      length += 2;
    }
  }
  return length;
};

/**
 * 特定の位置で文字列を削除する。
 * @param  {string} str
 * @param  {string} num - 左から数えた値
 * @return {string}
 */
function cutString(str,num){
  var length = str.bytes();
  if (length <= num) return str;
  var sub = length - num;

  if (length == str.length){
    return str.slice(0,-sub);
  }else{
    sub = parseInt(sub / 2);
    return str.slice(0,-sub);
  }
  return str;
}

Comments

[Pickerchu]

迅速なご回答ありがとうございます。
実際のテーブルは10項目程ございまして、
幅の指定数値もバラバラなのでcssで実装したいと考えています...

なのでもうしばらく他のご回答を待ちたいと思います。
cssでの実装が難しそうでしたら stdioさんのご回答を参考に修正しようと思います。

[stdio]

あとすみません。よく分からなかったのが、「データの文字数ごとに数pxのズレが起きてしまいます。」っておっしゃってましたけど、半角英数字と日本語混じりの文言がずれてしまうのですか？
あと改行を行っていいのかで答え変わりますね。

[Pickerchu]

返信ありがとうございます。
「データの文字数ごとに数pxのズレが起きてしまいます。」
上記の文は自分でもわかりにくい説明でした。すみません。
widthを指定し、そのセルの中に入るデータが指定幅を超えると、
データが収まるように幅が自動で広がってしまうということです。
そのためmax-widthで最大幅を指定しました。

[Pickerchu]

改行はしないため、はみ出したデータは「...」で省略という形にしております。

[stdio]

改行もなしなら、せめて表示だけは省略した方が良いですね。幅が取れない環境では特に重要な役目を果たします。ただマウスカーソルをあてるとフルで表示されるなどの機能も必要になるので、難しい範囲だと思います。

[Pickerchu]

おっしゃる通りでございます。
今回は省略が可能なので助かっていますが、
省略をしてはいけない場合は他の方法で行わないといけませんね...。