如何在内部对齐数据看起来像行？

时间：2015-04-09 10:59:22

标签： html css

我希望在行的<th>内对齐文本，以便它在同一级别上查看。现在，标题看起来像起伏不定。所以想把它看成一排。

像美洲中心，阿什维尔，...，Coopersville这样的标题应该在一行中看到;第二排XX％;符合条件：第三排xxxx;注册：第四行xxxxx。

结果应该是这样的：

enter image description here

但是如何在<th>中保持背景颜色相同，并且它们不应该像其他行一样具有边框。

我使用<br/>来分隔文字，但是没有给出正确的对齐外观。我怎么做？有没有办法在<th>中显示数据作为行？

代码可以在这里找到： https://jsfiddle.net/kirankapur/dka361qz/

3 个答案:

答案 0 :(得分：2)

我没有尝试使用换行符将文本作为行对齐，而是使用单独的tr块为每个元素集包装表行中的每组元素，单独用于标题，符合条件的状态和注册状态。

如果您想保护文字不被包装，可以将其包裹在div中并使用white-space: nowrap。

要处理边框，请记得在表标记中设置border=0和cellspacing=0（您可能可以在CSS中执行此操作但我已经习惯使用此重置多年了它有效。）

请参阅：https://jsfiddle.net/audetwebdesign/0rkvtncm/

注意：我在标题中添加了颜色值，以说明如何选择文本的各个组件以获得样式的精确控制。

其他样式：如果要向标题区域外的表格单元格添加顶部和底部边框，可以添加以下CSS规则：

table.local tbody.table-hover td {
    border-top: 1px dashed blue;
}
table.local tbody.table-hover tr:last-child td {
    border-bottom: 1px dashed blue;
}

请注意，CSS边框属性不会被继承。将边框属性应用于tr元素将不起作用;边框属性必须直接应用于td（或th）元素。

我在jsfiddle演示中添加了边框。

答案 1 :(得分：0)

替换你的css 

table.local th{
    vertical-align: middle;
}

带

table.local th{
    vertical-align: middle;
}

答案 2 :(得分：0)

内置UL-LI结构。这将解决问题

在此处找到代码：

＆＃13;
＆＃13; 
.table-fill {
  background: white;
  height: 320px;
  margin: auto;
  padding: 5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}
table.local th {
  color: #FFF;
  ;
  background: #9ea7af;
  border-right: 1px solid #787E89;
  font-size: 17px;
  font-weight: 100;
  padding: 18px;
  text-align: left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align: middle;
}
table.local th:first-child {
  border-top-left-radius: 0px;
}
table.local th:last-child {
  border-top-right-radius: 0px;
  border-right: none;
}
table.local tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color: #666B85;
  font-size: 16px;
  font-weight: normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
/*tr:hover td {
  background:#4E5066;
  color:#FFFFFF;
  border-top: 1px solid #22262e;
  border-bottom: 1px solid #22262e;
}*/

table.local tr:first-child {
  border-top: none;
}
table.local tr:last-child {
  border-bottom: none;
}
table.local tr:nth-child(odd) td {
  background: #EBEBEB;
}
/*tr:nth-child(odd):hover td {
  background:#4E5066;
}*/

table.local tr:last-child td:first-child {
  border-bottom-left-radius: 0px;
}
table.local tr:last-child td:last-child {
  border-bottom-right-radius: 0px;
}
table.local td {
  background: #FFFFFF;
  padding: 15px;
  text-align: left;
  vertical-align: middle;
  font-weight: 300;
  font-size: 15px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}
table.local td:last-child {
  border-right: 0px;
}
table.local th.text-left {
  text-align: left;
}
table.local th.text-center {
  text-align: center;
}
table.local th.text-right {
  text-align: right;
}
table.local td.text-left {
  text-align: left;
}
table.local td.text-center {
  text-align: center;
}
table.local td.text-right {
  text-align: right;
}
table.local th ul {}
＆＃13; 
<table class="local table-fill">
  <thead>
    <tr>
      <th class="text-left">
        <ul>
          <li style="font-weight:bold;">Americas Center</li>
          <li style="font-size:20px">
            XX%</li>

          <li style="font-weight:bold;">Eligible: xxxx</li>

          <li style="font-weight:bold;">Registered: xxxxx</li>
        </ul>
      </th>
      <th class="text-left">
        <ul>
          <li><span style="font-weight:bold;">Asheville</span>

          </li>
          <li><span style="font-size:20px">
                            XX%</span>

          </li>
          <li><span style="font-weight:bold;">Eligible:</span> xxxx

          </li>
          <li><span style="font-weight:bold;">Registered:</span> xxxxx</li>
        </ul>
      </th>
      <th class="text-left">
        <ul>
          <li><span style="font-weight:bold;">Austin</span>
          </li>
          <li>
            <span style="font-size:20px">
                            XX%</span>
          </li>
          <li>
            <span style="font-weight:bold;">Eligible:</span> xxxx
          </li>
          <li>
            <span style="font-weight:bold;">Registered:</span> xxxxx
          </li>
        </ul>
      </th>
      <th class="text-left">
        <ul>
          <li>
            <span style="font-weight:bold;">Buffalo Grove</span>
          </li>
          <li><span style="font-size:20px">
                                XX%</span>
          </li>
          <li>
            <span style="font-weight:bold;">Eligible:</span> xxxx
          </li>
          <li><span style="font-weight:bold;">Registered:</span> xxxxx
          </li>
        </ul>
      </th>
      <th class="text-left">
        <ul>
          <li><span style="font-weight:bold;">Charlotte</span>
            etc

          </li>
        </ul>
      </th>
      <th class="text-left">
        <ul>
          <li><span style="font-weight:bold;">Columbia</span>
          </li>
        </ul>
      </th>
      <th class="text-left">
        <ul>
          <li><span style="font-weight:bold;">Coopersville</span>
          </li>
        </ul>

      </th>


    </tr>
  </thead>
  <tbody class="table-hover">
    <tr>
      <td class="text-left">Irving</td>
      <td class="text-left">Louisville</td>
      <td class="text-left">Manchester</td>
      <td class="text-left">Marlborough</td>
      <td class="text-left">Memphis</td>
      <td class="text-left">Milpitas</td>
      <td class="text-left">Morgan Hill</td>
    </tr>
    <tr>
      <td class="text-left">Norcross</td>
      <td class="text-left">Northfield</td>
      <td class="text-left">Overland Park</td>
      <td class="text-left">Pennsylvania</td>
      <td class="text-left">Plano</td>
      <td class="text-left">Raleigh</td>
      <td class="text-left">RTS</td>
    </tr>
    <tr>
      <td class="text-left">San Carlos</td>
      <td class="text-left">San Diego</td>
      <td class="text-left">Telecommuters</td>
      <td class="text-left">Tempe</td>
      <td class="text-left">Valencia</td>
      <td class="text-left"></td>
      <td class="text-left"></td>
    </tr>

  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题