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

【问题标题】：Centering a table with text-align center使用文本对齐中心使表格居中
【发布时间】：2018-02-24 03:52:19
【问题描述】：

我想将表格居中，但虽然技术上是居中的，但 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 等）：

【问题讨论】：

您能解释一下图像与您的代码 sn-p 中的表格布局的关系吗？
我认为您需要 javascript 来计算表格的宽度 - 不要将其设置为 100%，然后使用 margin:0 auto 使其居中； tds 是文本对齐的：left;
@FluffyKitten 我尝试从图像翻译成 html 和 css。
您包含的图像是一个饼图 - 这与表格显示有什么关系？

标签： html css html-table

【解决方案1】：

我想我已经找到了你想要的...你希望文本左对齐但列文本居中。

您不能按照您的结构方式仅使用 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 之类的东西来实现。

【讨论】：

这和上面的设计看起来不太一样。
@CeciliaChan 上面的设计是一个饼图-请参阅我对您的问题的评论，要求您解释您的要求是什么...您的问题很不清楚，正如您所回答的那样得到。
@CeciliaChan 我想我已经弄清楚了你想要做什么，我已经更新了我的答案，所以看看 sn-p 并让我知道你的布局是否如此寻找
改变结构是个坏主意，我使用javascript循环来生成我的表。
@CeciliaChan 如果您向我们展示用于生成表格的 javascript，我可以更改它以使其与我的答案中的代码一起使用。

【解决方案2】：

您需要使用 javascript/jquery 计算表格的宽度，以便更好地控制它。检查this 示例。

<!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>

【讨论】：

呃？那么得到宽度呢？
是 - 通过 jquery 检查表格宽度。我相信您的表格没有特定的宽度，因为它取决于您的 tds 的内容
那么宽度怎么办？发布一个完整的答案，而不是如何做宽度（）

【解决方案3】：

您可以将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>

希望这会有所帮助！

【讨论】：

这看起来很奇怪，在图形中你可以清楚地看到它看起来不像或接近设计。