css 如何将HTML表格放入Flex容器体中？

v1l68za4  于 2023-02-20  发布在  其他
关注(0)|答案(1)|浏览(125)

我有下面的HTML代码和它各自的CSS。
表格似乎从主体中溢出。我如何将主体/标题扩展到全宽并包含表格和其他元素？
我试过宽度：100%;缩小表格和其他一些技巧，但都没有成功。无论如何，当放大到浏览器时，表格似乎还是溢出了。
以下是100%缩放时的外观：

以下是放大后的外观：

超文本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <link rel="stylesheet" href="../styles/layout.css">
    <link rel="stylesheet" href="../styles/listview.css">
</head>
<body>
    
    <!-- Header Start -->
    <div class = "container container-header">
        <div class = "item item-header-title">
            <h1>TITLE</h1>
        </div>
        <div class = "item item-header-username">
            <h2>
                <a class="item-header-username" href = "#username" target="_blank">
                    @username
                </a>
            </h2>
        </div>
    </div>
    <!-- Header End -->
    
    <div class = "container-page">
        <!-- Sidebar Start -->
        <div class = "container container-sidebar">
            <h4 class = "item item-sidebar">
                <a class ="item-sidebar" href="#home">Home</a>
            </h4>
            <button class="accordion">Page</button>
            <div class="panel">
                <a href= "#" class ="item-sidebar" > - Create new Page</a>
                <a href= "#" class ="item-sidebar" > - Create new Page</a>
                <a class ="item-sidebar" > - View Page</a>
                <a class ="item-sidebar" > - View Page</a>
            </div>  
            <button class="accordion">Page</button>
            <div class="panel">
                <a href= "#" class ="item-sidebar" > - Create new Page</a>
                <a href= "#" class ="item-sidebar" > - Create new Page</a>
                <a class ="item-sidebar" > - View Page</a>
                <a class ="item-sidebar" > - View Page</a>
            </div>
            <h4 class = "item item-sidebar">
                <a class = "item-sidebar" href="#glossary">Glossary</a>
            </h4>
        </div>
        <!-- Sidebar End -->
        
        <!-- Content Start -->
        <div class = "container container-content">
            <h1 class = "item item-content item-content-title">
                Title
            </h1>
            <h1 class = "item item-content item-content-body">
                <table id = "listviewTable">
                    <tr>
                        
                        <th>Column</th>
                        <th>Column</th>
                        <th>Column</th>
                        <th>Column</th>
                        <th>Column</th>
                        <th>Column</th>
                        <th>Column</th>
                        <th>Column</th>
                        <th>Column</th>
                        <th>Column</th>
                        <th>Column</th>
                        <th>Column</th>
                        <th>Column</th>     
                    </tr>
                    <tr>
                        <td>Data</td> 
                        <td>Data</td> 
                        <td>Data</td> 
                        <td>Data</td> 
                        <td>Data</td> 
                        <td>Data</td> 
                        <td>Data</td> 
                        <td>Data</td> 
                        <td>Data</td> 
                        <td>Data</td> 
                        <td>Data</td> 
                        <td>Data</td> 
                        <td>Data</td> 
                    </tr>
                </table>
            </h1>
        </div>
        <!-- Content End -->
    </div>
    
    <!-- Footer Start -->
    <div class = "container container-footer">
        <div class = "item item-footer">
            <h1>
                <a class="item-footer" href="Item" target="_blank">
                    Item
                </a> 
                |
                <a class="item-footer" href="Item" target="_blank">
                    Item
                </a>
                |
                <a class="item-footer" href="Item" target="_blank">
                    Item
                </a>
            </h1>
        </div>
    </div>
    <!-- Footer End -->
    <script src="../js/index.js"></script>
</body>
</html>

CSS：

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    width :  100%;
    border: 5px solid rgb(153, 153, 153);
}

.container {
    display: flex; /* or inline-flex */    
    
}

.container-header {
    flex-direction: row;
    /* background-image: linear-gradient(to bottom right,rgba(38, 0, 255, 0.9),
    rgba(96, 143, 230, 0.9)); */
    background-image: linear-gradient(to bottom right, rgba(34,47,62,0.9),
    rgba(80, 80, 80 , 0.9));
    font-family: "Lucida Console", "Courier New", monospace;
    color: rgba(236,114,17,255);
    /* rgba(236,114,17,255) */
    height: 100px;
    
    align-items: center;
    border: 1px solid rgb(153, 153, 153);
    
}   

.container-page{
    background-color: rgb(233, 24, 24);
    display: flex;
    flex-direction: row;
    
}

.container-sidebar {
    background-color: #d7d6d6;
    background-image: linear-gradient(to bottom right,rgb(215, 214, 214, 0.9),rgba(104, 101, 104, 0.9));
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    width: 25%;
    text-align: left;    
    border: 1px solid rgb(153, 153, 153);
    
}

.container-content {
    background-color: rgb(255, 255, 255);
    flex-direction: column;
    width: 75%;
    border: 1px solid rgb(153, 153, 153);
    font-size: 0.6em;
    font-weight: 10;
    color: #000;
    border: 1px solid rgb(153, 153, 153);
    
}

.container-footer {
    flex-direction: row;
    background-image: linear-gradient(to bottom right, rgba(34,47,62,0.9),
    rgba(80, 80, 80 , 0.9));
    font-family: "Lucida Console", "Courier New", monospace;
    color: white;
    align-items: center;
    border: 1px solid rgb(153, 153, 153);
    height : 50px;
    font-size : 0.7em;
}

.item {
    /*  */
}

.item-header-title {
    flex-grow: 1;
    text-align: left;
    padding-left: 2%;
    font-size: 1.5em;
    
}

.item-header-username {
    flex-grow: 1; 
    text-align: right;
    padding-right: 2%;
    font-size: 1em;
}

.item-header-title {
    flex-grow: 1;
}

.item-sidebar {
    margin: 0;
    font-weight: 10;
}

.item-content {
    background-color: rgb(150, 243, 167);
}

.item-content-title {
    background-color: rgb(244, 241, 241);
    margin: 0;
    padding: 30px;
    color: #000;
    border: 1px solid rgb(153, 153, 153);
    font-size: 3em;
    
}

.item-content-body {
    background-color: rgb(251, 251, 251);
    flex-grow: 2;
    margin: 0;
    padding: 30px;
    color: #000;
}

.item-footer
{
    flex-grow: 1;   
}

a{
    text-decoration: none;
    color: white;
}

a.item-sidebar{
    display: block;
    color: #000;
    padding: 20px 16px;
    background-color: #ececec;
}

a.item-sidebar.active {
    background-color: #5a51b6;
    color: white;
}

a.item-sidebar:hover:not(.active) {
    background-color: #5a51b6;
    color: white;
}

.accordion {
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s; 
}

.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}


.panel {
    padding: 0 28px;
    max-height: 0;
    width: 100%;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

table {
    border-collapse: collapse;
    width: 100%;
    align-items: center;
    font-weight: 10;
    font-size: 0.8em;
    
}
 
th, td {
    text-align: left;
    padding: 8px;
    border: 1px solid #ddd;
}

如有任何帮助或建议，不胜感激.谢谢!

css

1条答案

按热度按时间
8ehkhllq

8ehkhllq1#

您应该从CSS的主体选择器中删除border属性，并添加width: 100%;添加到.container-header和.container-page选择器，将表的width设置为100%，并从.item-content-body选择器中删除width属性

body {
  margin: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}

.container {
  display: flex;
}

.container-header {
  flex-direction: row;
  width: 100%;
  background-image: linear-gradient(to bottom right, rgba(34, 47, 62, 0.9),
    rgba(68, 108, 179, 0.9));
}

.container-page {
  width: 100%;
}

.container-content {
  flex: 1;
  padding: 20px;
  overflow-y: scroll;
}

.item-content-body {
  margin: 0;
  padding: 0;
}

table {
  width: 100%;
}

th,
td {
  padding: 15px;
  text-align: center;
  border: 1px solid black;
}
赞(0）分享  回复(0）举报  2023-02-20
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com