Question

我对前端开发很陌生，我遇到了这个问题：我希望在表格的每一行（左侧）和每一列上显示文字。结果类似于棋盘：

我该如何管理？

Answer 1

这并不完美，但却模仿了它的样子。

我所做的是制作一个3x3网格，网格的顶部和左侧包含数字，内部包含边框显示。

HTML

<div id="grid">
  <div class="grid-element outside"></div>
  <div class="grid-element outside">
    <span class="top-content">1</span>
  </div>
  <div class="grid-element outside">
    <span class="top-content">2</span>
  </div>
  <div class="grid-element outside">
    <span class="left-content">A<span>
  </div>
  <div class="grid-element"></div>
  <div class="grid-element"></div>
  <div class="grid-element outside">
    <span class="left-content">B<span>
   </div>
  <div class="grid-element"></div>
  <div class="grid-element"></div>
</div>

CSS

 .clear {
  clear: both;
}

#grid {
  width: 610px;
}

.grid-element {
  width: 200px;
  height: 200px;
  float: left;
  border:1px solid #000;
}

.outside{
  border:1px solid #fff;
   position: relative;
}

.top-content {
    position: absolute;
    bottom: 0;
    right:50%;
}

.left-content {
    position: absolute;
    top: 50%;
    right:10px;
}

JSFiddle

Answer 2

您可以使用HTML表格：

<table>
  <tr>
    <td class="outside"></td>
    <td class="outside">1</td>
    <td class="outside">2</td>
    <td class="outside">3</td>
  </tr>
  <tr>
    <td class="outside">A</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="outside">B</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="outside">C</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

添加CSS样式：

.outside {border:none;}
table {border-collapse: collapse; height: 250px; width: 250px;}
th, td {border: 1px solid black;}
td {text-align: center; vertical-align: middle;}

但是，查看bootstrap的网格布局将是一个更好的选择。 www.getbootstrap.com

这是一个有效的演示：http://plnkr.co/edit/JWP5RvA5sOATseliVveg?p=preview

Answer 3

我应该尝试嵌套两个表。

您可以尝试这样的事情：

<强> HTML

<table class="outer" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th></th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td colspan="3" rowspan="3" id="inner-container">
                <div class="inner">
                    <table cellspacing="0" cellpadding="0">
                        <tbody>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
        <tr>
            <td>B</td>
        </tr>
        <tr>
            <td>C</td>
        </tr>
    </tbody>
</table>

<强> CSS

.outer th {
    padding: 5px 20px;
}


.outer > tbody > tr > td {
    padding: 20px 5px;
}

.outer th,
.outer td {
    text-align: center;
}

.inner {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
}

.inner table {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
}

.inner td {
    border: 1px solid #000;
}

#inner-container {
    padding: 0;
    position: relative;
}

这是我的演示：https://jsfiddle.net/dnxgcoyo/1/

HTML中表格行旁边的文本

3 个答案: