Css 格式化div表_Css - Fatal编程技术网

Css 格式化div表

css

Css 格式化div表,css,Css,我只是寻找任何建议，以帮助我格式这个div表正确。表格的Set部分不延伸整个长度。我已经包括了一张它现在看起来像什么的照片。我试着玩了行和单元格的显示选项，但似乎没有给我我想要的结果 <head> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <style> .CategoryTable {

我只是寻找任何建议，以帮助我格式这个div表正确。表格的Set部分不延伸整个长度。我已经包括了一张它现在看起来像什么的照片。我试着玩了行和单元格的显示选项，但似乎没有给我我想要的结果

<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>


.分类表
{
宽度：自动；
高度：自动；
显示：表格；
垂直对齐：中间对齐；
边框顶部：1件纯黑；
边框底部：1px纯黑；
}
.分类行
{
显示：表格行；
宽度：自动；
最大宽度：800px；
边框顶部：1件纯黑；
文本对齐：居中；
}
.CategoryTable>.CategoryTable行：最后一个子级
{
边框底部：1px纯黑；
}
div.CategoryTable-Row:第n个子项（偶数）
{
背景色：#e6ffe6；
}
.类别表行：第一个孩子
{
边框顶部：1件纯黑；
}
.分类电池
{
换字：正常；
显示：表格单元格；
宽度：自动；
最小宽度：300px；
身高：100%；
右边框：1px纯黑；
}
.分类标签
{
文本对齐：居中；
左边框：1px纯黑；
最大宽度：490px；
}
.分类字段
{
最大宽度：290px；
}
.分类表集
{
显示：表格行；
宽度：自动；
最小宽度：300px；
文本对齐：居中；
垂直对齐：中间对齐；
}
.CategoryTable集合标题{
宽度：自动；
背景色：#008000；
颜色：白色；
高度：20px；
边框：1px纯黑；
边框底部：无；
边界顶部：无；
}
.CategoryTable SetFooter
{
宽度：自动；
背景色：#008000；
边框：1px纯黑；
高度：20px；
边框底部：无；
边界顶部：无；
}
.类别表下拉列表
{
光标：指针；
}
$（文档）.ready（函数（）{
});
这是一个很长的标题，将跨越整个div.Wrap、push-over或hide？这里有更多的文字。
标签
标签
选择这里
选择1
选择2
选择3
标签
这是一套
标签
标签
选择这里
选择1
选择2
选择3
标签
标签
标签
选择这里
选择1
选择2
选择3
标签
标签
标签
选择这里
选择1
选择2
选择3
标签
标签
标签
选择这里
选择1
选择2
选择3

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

换衣服

.CategoryTable 
    {
        display: table;
    }

到

还有你的

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

到

它会使您的桌子稍微折叠，但看起来仍然很好，您可以在此处查看：

还有一个提示，你有很多СSS代码什么都不做。您应该删除一些行并查看更改-如果没有更改，则不需要此行。

应该是什么样子？我会使用flexbox，但我知道它是一个实际的表，所以从语义上讲，您应该使用表，但flexbox会使处理layout@StefanBob上面写着“这是一个集合”的部分应该延伸表格的整个长度。标签部分应该对齐，输入字段应该对齐，它应该看起来像一个普通的矩形表格。@BreeSavard创建带有“div”的表格很重要，你应该使用吗？@EDWIN如果可以，我会，在使用表格时，屏幕阅读器会出现问题，因此我必须完全避免使用。这是一个很好的进展，但不幸的是，IE不能像预期的那样工作。谢谢提示！

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

.CategoryTable-Set
    {
        display: block;
    }