1

注: これらの問題は、Firefox または Chrome でのみ発生します。IE には同じ問題はないようです。

HTML

    <div id="renewals-div">
        <label for="renewals">Renewals:</label>
        <input type="hidden" name="renewal_count" id="renewal_count" value="0">
        <table id="renewals">
            <thead>
                <tr data-num="-1" class="header">
                    <th class="date_column">Date</th>
                    <th class="details_column">Details</th>
                </tr>
            </thead>
            <tbody>
                <!-- rows populated by ajax call on load -->
            </tbody>
        </table>
        <br>
        <label for="add_renewal-div"></label> <!-- spacer -->
        <span id="renewal_buttons-span">
            <button type="button" id="add_renewal">Add</button>
            <button type="button" id="remove_renewal">Remove</button>
        </span>
    </div>

CSS

form {
    width: 100%;
    padding-left: 2em;
}

form fieldset {
    border: none;
    margin: 0 0;
    padding: 0 0;
}

form div {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: .2em;
}

form label {
    display: inline-block;
    padding-bottom: 10px;
    width: 30%;
    max-width: 15em;
    vertical-align: top;
}

form input[type=submit] {
    /*float: left;*/
    width: 75px;
    height: 35px;
}

.radio_group {
    width: 70%;
}

form input[type=text] {
    width: 50%;
    max-width: 400px;
    display: inline-block;
}

/* Renewals table and other stuff */
table {
    table-layout:fixed;
    width: 51%;
    max-width: 404px;
    border-collapse: collapse;
    display: inline-block;
}

table td, table th {
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
}

table input {
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    width: 95% !important;
    margin: 3px 3px;
}

table tr:hover:not(.selected):not(.header) {
    background-color: #D6ADFF;
}

table .selected {
    background-color: #522D80;
    color: white;
}

.header {
    width: 100%;
}

.date_column {
    width: 25%;
}

.details_column {
    width: 75%;
}

#renewal_buttons-span button {
    width: 5em;
    height: 2.5em;
}

/*********************************/

div.ui-datepicker {
    font-size:10px;
}
/*@media (max-width: 650px) {*/

JS

    $('#remove_renewal').click(function() {
        var next = $('.selected').next('tr');
        $('.selected').remove();
        if (next.length === 0) {
            $('#renewals tbody tr').last().click();
        } else {
            next.click();
        }
    });

私の問題は「更新:」テーブルにあります。ユーザーがテーブルに行を追加および削除できるようにしています。デフォルトでは、ページの読み込み時に 2 つのテスト行が読み込まれます。両方を削除すると、突然、テーブルの列が幅のプロパティを尊重しなくなります。<th>残っているのは列だけなので、幅の設定を尊重していない列だと思います。行が存在しない場合でも幅を尊重するにはどうすればよいですか?

編集: 以下の副次的な問題は解決されました。CSS セレクターが、CSS ファイルの最後のものに基づいて相互に上書きされると誤解していました。どうやら、スタイルは最も具体的なセレクターによって決定されます。2 番目のセレクターを に変更するinput[type=text]ことで、!important.

副次的 な問題: テーブルの入力ボックスの幅に関する 2 つ目の問題があります。入力幅に影響する 2 つの CSS セレクターがあります。

form input[type=text] {
    width: 50%;
    max-width: 400px;
    display: inline-block;
}

table input {
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    width: 95% !important;
    margin: 3px 3px;
}

ご覧のとおり、幅を設定するセレクター95%は前のものの後に来るため、優先する必要があります。!importantただし、50%幅を取り出すと、 95%! CSS では、競合するスタイルの場合、最後に宣言/選択されたものが勝つと思いましたか? !important適用したいスタイルが最後なので、なぜまだ必要なのですか?

4

3 に答える 3

1

重要な理由を知りたい場合は、削除してください。

次に、Chrome で開発ツールに移動します。問題のある要素を調べます。右側のパネルの [スタイル] で、そのプロパティが交差していることがわかります。

次に、上のパネルである Computed Style に移動します。

プロパティに移動します。この場合は幅。矢印を押して展開すると、有罪のルールが何であるかがわかります

于 2013-01-25T20:26:04.643 に答える
1

#date_col に幅を設定し、崩壊を防ぐことができました

.header にはスタイルが関連付けられていないことに気付いたので、幅の値を入れて、2 つのセルで親コンテナーを埋めることができます。1 つは 25%、もう 1 つは 75% ですが、参照する親がありません。

!important 宣言は、ID セレクターとの特異性戦争の兆候であり、混乱に陥る可能性があります。この問題を防ぐために、ID の代わりにクラスを使用することをお勧めします。

この記事はそれをよく説明していると思います。下に向かって

于 2013-01-25T20:09:23.450 に答える
0

私の回答はモデレーターによって削除され、「コメント」に変換されました

あなたのテーブルにインラインブロックが表示されていることに最初に気付きました。

display:table を試してみてください。TABLE レイアウトのすべてのメカニズムは従います。

table {
    border-collapse: collapse;
    display: table; /* you can even remove this part*/
    max-width: 404px;
    table-layout: fixed;
    width: 51%;
}

ラベルと一緒にレイアウトを維持するには、前のラベルを左にフロートさせます。

続ける

于 2013-01-28T18:16:40.107 に答える