使用文本对齐中心使表格居中

问题描述 投票：0回答：4

我想让一个表格居中，但是虽然技术上是居中的，但是td内容的长度不同使得表格右侧有一个空白区域。 

.wrap {
  background: pink;
  padding: 0 50px;
}

table {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  tr {
    td {
      padding: 10px;
      text-align: left;
    }
  }
}
<div class="wrap">
  <table>
    <tbody>
      <tr>
        <td>something here</td>
        <td>row 1 col 2 my </td>
      </tr>
      <tr>
        <td>row 2 col 1 hello world</td>
        <td>react.js</td>
      </tr>
    </tbody>
  </table>
</div>

我可以使 

table
和 
td
成为对齐中心，但 td 内容的不同长度使其看起来不均匀。 

.wrap {
  background: pink;
  padding: 0 50px;
}

table {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  tr {
    td {
      padding: 10px;
    }
  }
}
<div class="wrap">
  <table>
    <tbody>
      <tr>
        <td>something here</td>
        <td>row 1 col 2 my </td>
      </tr>
      <tr>
        <td>row 2 col 1 hello world</td>
        <td>react.js</td>
      </tr>
    </tbody>
  </table>
</div>

我想要的是 td 的内容应该左对齐并在包装器内看起来居中，就像此图像上的标签（即 Cam 1、Cam 2 等）：

html css html-table
4个回答
0
投票

您可以将 

width: 50%
分配给 
<td>
使其宽度相等，例如：

tr td {
  text-align: left;
  width: 50%;
}


.wrap {
  background: pink;
  padding: 0 50px;
}

table {
  width: 100%;
  text-align: center;
}

tr td {
  text-align: left;
  width: 50%;
}
<div class="wrap">
  <table>
    <tbody>
      <tr>
        <td>something here</td>
        <td>row 1 col 2 my </td>
      </tr>
      <tr>
        <td>row 2 col 1 hello world</td>
        <td>react.js</td>
      </tr>
    </tbody>
  </table>
</div>

希望这有帮助！

0
投票

您需要使用 javascript/jquery 计算表格的宽度，以便更好地控制它。检查这个样本。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <style>

    table {
      margin : 0 auto;
      background-color:#DDDDDD;
    }
    table tr td {
      padding : 10px;
      text-align:left;

    }

  </style>
</head>
<body>

  <table id="myTable">
    <tr>
      <td> * Sample content</td>
      <td> * Sample content</td>
    </tr>
     <tr>
      <td> * Sample content</td>
      <td> * Sample content</td>
    </tr>   
  </table>
  <script>

      $(document).ready( function() {

        $('#myTable').css({
          width: $('#myTable').outerWidth() + 'px'
        });

      });

  </script>

</body>
</html>
0
投票

我想我已经弄清楚了你想要的...你希望文本左对齐，但文本的column居中。

仅使用 HTML 和 CSS 的结构方式无法做到这一点，因为每一列都不会被视为一个单元来找到使其居中的宽度。

对于纯 HTML 和 CSS 解决方案，您必须重新构建表格，以便将每列的内容视为一个整体。您可以将其显示为 

<ul>
、
<p>
，甚至另一个表格，例如

工作片段：

.wrap {
    background: pink;
    padding: 0 50px;
}

table {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    table-layout: fixed;
    tr{
        td {
            padding: 10px;
            text-align: center;
            width: 50%;
        }
    }
}

.cellcontainer {
    width: auto;
    display: inline-block;
    text-align: left;
}

td { border: 1px solid #555555; }
<div class="wrap">
<table>
    <tbody>
        <tr>
            <td>
                <div class="cellcontainer">
                        <p>something here</p>
                        <p>row 2 col 1 hello world</p>
                </div>
            </td>
             <td>
                <div class="cellcontainer">
                        <p>row 1 col 2 my</p>
                        <p>react.js</p>
                </div>
            </td>
        </tr>
    </tbody>
</table>
</div>

我为表格列添加了边框，以便您可以看到左对齐的内容在列中居中。

如果无法更改 HTML 的结构，则需要使用 JavaScript 之类的东西来实现此目的。

0
投票

你的问题很复杂，不清楚。但据我了解，您想要将表格居中，而不是 td 的文本。为此，您可以在桌子上使用 

margin:auto
并删除 
text-align:center
并添加 
width
到您的桌子上（因为全宽无法居中），然后您的桌子将在没有任何 
.wrapper
的情况下居中。

示例

HTML

<table>
    <tr>
        <td>Cam 1</td>
        <td>Cam 2</td>
    </tr>
    <tr>
        <td>Cam 3</td>
        <td>Cam 4</td>
    </tr>
</table>

CSS

table {
    width: 70%;
    margin: auto;
}

table tr td {
    border: 1px solid black; /* Added Border, Remove It */
}

为td添加边框，以便您可以检查td的文本对齐方式。并且还更改了 td 文本（对此感到抱歉）。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.