Question

我只是在寻找任何建议来帮助我正确设置此div表的格式。该表的“设置”部分不会扩展全长。我提供了一张当前外观的照片。我尝试过使用行和单元格的显示选项，但似乎没有任何结果可以满足我的需求。

<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head> 

<style>
    .CategoryTable 
    {
        width: auto;
        height: auto;
        display: table;
        vertical-align: middle;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
    }

    .CategoryTable-Row 
    {
        display: table-row;
        width: auto;
        max-width: 800px;
        border-top: 1px solid black;
        text-align: center;
    }

    .CategoryTable > .CategoryTable-Row:last-child
    {
        border-bottom: 1px solid black;
    }

    div.CategoryTable-Row:nth-child(even)
    {
        background-color: #e6ffe6;
    }

    .CategoryTable-Row:first-child
    {
        border-top: 1px solid black;
    }

    .CategoryTable-Cell
    {
        word-wrap: normal;
        display: table-cell;
        width: auto;
        min-width: 300px;
        height: 100%;
        border-right: 1px solid black;
    }

    .CategoryTable-Label
    {
        text-align: center;
        border-left: 1px solid black;
        max-width: 490px;
    }

    .CategoryTable-Field
    {
        max-width: 290px;
    }

    .CategoryTable-Set
    {
        display: table-row;
        width: auto;
        min-width: 300px;
        text-align: center;
        vertical-align: middle;
    }

    .CategoryTable-SetHeader {
        width: auto;
        background-color: #008000;
        color: white;
        height: 20px;
        border: 1px solid black;
        border-bottom: none;
        border-top: none;
    }

    .CategoryTable-SetFooter
    {
        width: auto;
        background-color: #008000;
        border: 1px solid black;
        height: 20px;
        border-bottom: none;
        border-top: none;
    }

    .CategoryTable-DropDown
    {
        cursor: pointer;
    }


</style>


<script>

    $(document).ready(function(){
    });

</script>

<div class="CategoryTable">
    <div class="CategoryTable-Row">
        <div class="CategoryTable-Cell CategoryTable-Label">This is a very long title that will span across the entire div. Wrap, or push over, or hide? More text goes here.</div>
        <div class="CategoryTable-Cell CategoryTable-Field"><input class="CategoryTable-Input"></input></div>
    </div>
    <div class="CategoryTable-Row">
        <div class="CategoryTable-Cell CategoryTable-Label">Label</div>
        <div class="CategoryTable-Cell CategoryTable-Field"><input type="checkbox"></div>
    </div>
    <div class="CategoryTable-Row">
        <div class="CategoryTable-Cell CategoryTable-Label">Label</div>
        <div class="CategoryTable-Cell CategoryTable-Field">
            <select class="CategoryTable-DropDown">
                <option value="default">Select Here</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
    </div>
    <div class="CategoryTable-Row">
        <div class="CategoryTable-Cell CategoryTable-Label">Label</div>
        <div class="CategoryTable-Cell CategoryTable-Field"><input class="CategoryTable-Input"></input></div>
    </div>
    <div class="CategoryTable-Set">
        <div class="CategoryTable-SetHeader">This is a Set</div>
        <div class="CategoryTable-Row">
            <div class="CategoryTable-Cell CategoryTable-Label">Label</div>
            <div class="CategoryTable-Cell CategoryTable-Field"><input type="checkbox"></div>
        </div>
        <div class="CategoryTable-Row">
            <div class="CategoryTable-Cell CategoryTable-Label">Label</div>
            <div class="CategoryTable-Cell CategoryTable-Field">
                <select class="CategoryTable-DropDown">
                        <option value="default">Select Here</option>
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                </select>
            </div>
        </div>
        <div class="CategoryTable-Row">
            <div class="CategoryTable-Cell CategoryTable-Label">Label</div>
            <div class="CategoryTable-Cell CategoryTable-Field"><input class="CategoryTable-Input"></input></div>
        </div>
        <div class="CategoryTable-Row">
            <div class="CategoryTable-Cell CategoryTable-Label">Label</div>
            <div class="CategoryTable-Cell CategoryTable-Field"><input type="checkbox"></div>
        </div>
        <div class="CategoryTable-SetFooter"></div>
    </div>
    <div class="CategoryTable-Row">
        <div class="CategoryTable-Cell CategoryTable-Label">Label</div>
        <div class="CategoryTable-Cell CategoryTable-Field">
            <select class="CategoryTable-DropDown">
                    <option value="default">Select Here</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
            </select>
        </div>
    </div>
    <div class="CategoryTable-Row">
        <div class="CategoryTable-Cell CategoryTable-Label">Label</div>
        <div class="CategoryTable-Cell CategoryTable-Field"><input class="CategoryTable-Input"></input></div>
    </div>
    <div class="CategoryTable-Row">
        <div class="CategoryTable-Cell CategoryTable-Label">Label</div>
        <div class="CategoryTable-Cell CategoryTable-Field"><input type="checkbox"></div>
    </div>
    <div class="CategoryTable-Row">
        <div class="CategoryTable-Cell CategoryTable-Label">Label</div>
        <div class="CategoryTable-Cell CategoryTable-Field">
            <select class="CategoryTable-DropDown">
                <option value="default">Select Here</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
    </div>
    <div class="CategoryTable-Row">
        <div class="CategoryTable-Cell CategoryTable-Label">Label</div>
        <div class="CategoryTable-Cell CategoryTable-Field"><input class="CategoryTable-Input"></input></div>
    </div>
    <div class="CategoryTable-Row">
        <div class="CategoryTable-Cell CategoryTable-Label">Label</div>
        <div class="CategoryTable-Cell CategoryTable-Field"><input type="checkbox"></div>
    </div>
    <div class="CategoryTable-Row">
        <div class="CategoryTable-Cell CategoryTable-Label">Label</div>
        <div class="CategoryTable-Cell CategoryTable-Field">
            <select class="CategoryTable-DropDown">
                    <option value="default">Select Here</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
            </select>
        </div>
    </div>
</div>

Table Example Photo

Answer 1

因此，这里最简单的解决方案之一：

更改您的

no overloaded for method 'WithMessage' accepts three arguments

收件人

.CategoryTable 
    {
        display: table;
    }

还有你的

.CategoryTable 
    {
        display: table-caption;
    }

收件人

.CategoryTable-Set
    {
        display: table-row;
    }

它将稍微折叠您的桌子，但看起来仍然不错，您可以在此处进行检查：https://jsfiddle.net/z719apcn/

还有一个提示，您有很多不执行任何操作的СSS代码。您应该删除一些行并查看更改-如果没有更改，则不需要此行。

格式化div表

1 个答案: