用文本居中对齐表格

Question

我想居中放置一个表格，但尽管它在技术上居中，但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等)：

​

​

Answer 1

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

​

希望这能有所帮助！

Answer 2

我想我已经知道你想要什么了..。您希望文本左对齐，但文本列居中。

您不能仅使用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之类的工具来实现。

Answer 3

您需要使用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>