Question

所以我有一个看起来像这样的表：

+++++++++++
+    +    +
+ TD + TD +
+    +    +
+++++++++++
+    +    +
+ TD + TD +
+    +    +
+++++++++++

我似乎无法弄清楚如何添加侧边栏：

++++++++++++++++
+    +    + S  +
+ TD + TD + I  +
+    +    + D  +
+++++++++++ E  +
+    +    + B  +
+ TD + TD + A  +
+    +    + R  +
++++++++++++++++

或页脚

++++++++++++++++
+    +    + S  +
+ TD + TD + I  +
+    +    + D  +
+++++++++++ E  +
+    +    + B  +
+ TD + TD + A  +
+    +    + R  +
++++++++++++++++
+         +
+ FOOTER  +
+         +
+++++++++++

所以，除了我可怕的ASCII技巧之外，这是我在第一个模型中提到的HTML：

<!-- Flatly, a baller theme, I use it in almost all projects -->
<link href = "https://bootswatch.com/flatly/bootstrap.min.css" rel = "stylesheet" type = "text/css">
<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

CSS：

td {
    width: 50px;
    height: 50px;
    border: solid #000 1px !important;
}

给出结果，你可以在this小提琴看到。

现在，如果您想知道为什么我可能需要这样做，那我可以进行一些实验，这样您就可以通过按侧边栏和页脚来扩展到桌面按行和列的表格。我试图使页脚和侧边栏的高度和宽度与桌子相同。（如模型3所示）

Answer 1

请检查

<强> JSFIDDLE - Using Table

<强> JSFIDDLE- Using Div

<table>
<tr>
  <td></td>
  <td></td>
    <td rowspan='4'> sidebar</td>
</tr>
<tr>
  <td></td>
  <td></td>

</tr>
<tr>
  <td></td>
  <td ></td>
</tr>
<tr>
  <td></td>
  <td ></td>
</tr>
<tr>
  <td colspan='2'>Footer</td>
</tr>

</table>

使用DIV

<div id="header">
  This is header

</div>
<div id="content">
  <div class="left-panel">
    <p>
      main content
    </p>
  </div>
  <div class="right-panel">
    side bar
  </div>
</div>
<div id="footer">
  This is my footer
</div>

#header,
#footer,
#content {
  float: left;
  width: 100%;
  min-height: 20px;
  border: 1px dotted blue;
  text-align: center;
}

.left-panel {
  float: left;
  width: 78%;
  border: 1px solid red;
  min-height: 300px;
}

.right-panel {
  float: left;
  width: 20%;
  border: 1px solid red;
  min-height: 300px;
}

Answer 2

在这种情况下（即此行数和列数，2x2），您可以通过添加其他单元格/列/行（如下所示）来完成此操作。这将添加＆＃34;侧边栏＆＃34;作为一个完整高度的新专栏和＆＃34;页脚＆＃34;作为2列以上的新行。

＆＃13;

td { border: 1px solid green; }

＆＃13;

    <table>
      <tr>
        <td>test content</td>
        <td>test content</td>
        <td rowspan=3>"sidebar"</td>
      </tr>
      <tr>
        <td>test content</td>
        <td>test content</td>
      </tr>
      <tr>
        <td colspan=2>"footer"</td>
      </tr>
    </table>

＆＃13;

Answer 3

CREATE VIEW user_view AS SELECT * FROM users;

SELECT * FROM user_view WHERE isAdmin = true;

td {
    width: 50px;
    height: 50px;
    border: solid #000 1px !important;
}

尝试一次

Answer 4

td {
    width: 50px;
    height: 50px;
    border: solid #000 1px !important;
}

<!-- Flatly, a baller theme, I use it in almost all projects -->
<link href = "https://bootswatch.com/flatly/bootstrap.min.css" rel = "stylesheet" type = "text/css">
<table>
<tr>
  <td></td>
  <td></td>
  <td rowspan="2"></td>
</tr>
<tr>
  <td></td>
  <td></td>
 
</tr>
<tr>
  <td colspan="2"></td>
</tr>
</table>

这里是jsfiddle：demo

在表格中添加侧边栏和页脚

4 个答案: