datepicker の曜日が崩れる

.ui-datepicker th {
    padding: .7em .3em;
    text-align: center;
    font-weight: bold;
    border: 0;
}
table th {
    color: #363636;
}
table td, table th {
    text-align: left;
    vertical-align: top;
}
th {
    text-align: inherit;
}
td, th {
    padding: 0;
    text-align: left;
}
*, ::after, ::before {
    box-sizing: border-box;
}
*, ::after, ::before {
    box-sizing: inherit;
}
.ui-datepicker table {
    font-size: .9em;
    border-collapse: collapse;
}
table {
    border-collapse: collapse;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.ui-widget-content {
    color: #333333;
}
.ui-widget {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1em;
}

datepicker の日曜日だけが異常に幅を取ります。
上記のcssのチェックをすべて外してみましたが、直りませんでした。

ほかに何が考えられますか。
よろしくお願いします。

yambejp

2021/03/25 03:07

datepicker はjQueryUIではない？どうやって呼び出しているか明記ください

keraker

2021/03/25 03:59

たしか https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.jsと <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script> の部分だったと思います。

keraker

2021/03/25 04:01

あと、https://code.jquery.com/ui/1.12.1/jquery-ui.js

keraker

2021/03/25 04:18

わかりました。 tbody{ display: block; width: auto; overflow-x: auto; white-space: nowrap; } というcssによるものでした。なぜかfirefoxの開発者ツールには表示されていませんでしたが、htmlに直接書くとスタイル欄には表示されいものなのでしょうか。

keraker

2021/03/25 04:20

また、absoluteにすると直ったのですが、なぜblockだと一つだけが大きく表示されたのでしょうか。

keraker

2021/03/25 04:27

失礼しました。display: block;を消すと、の間違いです。

m.ts10806

2021/03/25 04:48

質問は編集できます。写真より画面キャプチャをコードはコピペで再現できるものを

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

__htmlに直接書くとスタイル欄には表示されいものなのでしょうか。 __

そういうことはないと思います。

__なぜblockだと一つだけが大きく表示されたのでしょうか。 __

匿名テーブルオブジェクトが生成されるからだと思います。

If a child C of a 'table' or 'inline-table' box is not a proper table child, then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are not proper table children.
If a child C of a row group box is not a 'table-row' box, then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are not 'table-row' boxes.
If a child C of a 'table-row' box is not a 'table-cell', then generate an anonymous 'table-cell' box around C and all consecutive siblings of C that are not 'table-cell' boxes.

17.2.1 Anonymous table objects | Tables

以上の通り、テーブルボックスの子がブロックボックスのため、外側に匿名テーブル行ボックスと匿名テーブルセルボックスが生成されていると思います。
つまり、イメージとしてはこんな感じです。

html
1<table>
2    <thead>
3        <tr>
4            <th>日</th>
5            <th></th>
6            <th></th>
7            <th></th>
8            <th></th>
9            <th></th>
10            <th></th>
11        </tr>
12    </thead>
13    <tr class="Anonymous">
14        <td class="Anonymous">
15            <tbody style="display: block;">...</tbody>
16        </td>
17    </tr>
18</table>