Question

这是我想要的：

layout I am trying to achieve 我想在侧面有一个类别栏，在右侧框中有所有主要内容。现在，我正试图用桌子做这件事，而且事实证明这很困难。我应该使用哪些有用的CSS函数？

编辑：对不起，这是当前的代码：

<body>
<img src="xxx">

<table width="100%" border=1>
    <col width="30%">
    <col width="70%">

    <tr>
        <th id="row1">
            Categories
        </th>
        <th id="row1">
            Main Content
        </th>
    </tr>

    </div>


    <tr>
        <th>
            Category Header
        </th>
        <td id="main-content">
            45645
        </td>
    </tr>

    <tr>
        <td>
            <li>
            Category Entry
            </li>
        </td>
    </tr>

</table>

我目前的样式表：

li {
list-style-type: none;
}

#row1 {
color: ;
}

#main-content {
padding: 9999999;
margin-bottom: 9999999;
}

Answer 1

这样的东西？

＆＃13;

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

header {
  width: 100%;
  margin-bottom: 5%;
  background: red;
  padding: 2%;
}

aside {
  clear: left;
  float: left;
  width: 28%;
  margin-right: 2%;
  padding: 2%;
  background: blue;
}

main {
  float: left;
  width: 68%;
  margin-left: 2%;
  padding: 2%;
  background: green;
}

＆＃13;

<body>
  <header>This is the header. This is the header. This is the header. This is the header. This is the header. This is the header. This is the header. This is the header. </header>
  <aside>This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar.
    This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. This is the sidebar. </aside>
  <main>This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main
    content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This
    is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content.
    This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main
    content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This
    is the main content. This is the main content. This is the main content. This is the main content. </main>
</body>

＆＃13;

这是一种响应式设计，但如果你不想要它，只需应用固定宽度。

Answer 2

您可以使用HTML5语义作为标题，旁边或主要和CSS Flexbox。试试这个片段：

＆＃13;

body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
header {
  flex: 0 1 100%;
  background: red;
}
aside {
  flex: 1 0 25%;
  background: green;
}
main {
  flex: 1 0 75%;
  background: blue;
}

＆＃13;

<body>
  <header>Header content</header>
  <aside>Aside content</aside>
  <main>Main content</main>
</body>

＆＃13;

Answer 3

最好将colspan=2用于第一行td's并将第二行的td的第height="80%"放入<table style="height: 200px; width: 200px;"> <colgroup> <col width="30%"> <col width="70%"> </colgroup> <tr> <td style="border: 1px solid black; height: 20px;" colspan="2">First row</td> </tr> <tr> <td style="border: none; padding: 0; margin: 0; vertical-align: top;"> <div style="height: 80%; border: 1px solid black; margin-top: 0; padding-top: 20px;"> Test <div> </td> <td style="border: 1px solid black">$100</td> </tr> </table>：

filter

Answer 4

我建议你使用带有css的div，在这种情况下使用表似乎不对。

如果您是所有html和css的新手，请试用Bootstrap

超级简单和预制的CSS。您可以查看示例并按照简单的教程进行操作。

包含不同大小列的HTML + CSS表格？

4 个答案: