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和＆amp; 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>

使带有文本对齐中心的表格居中

3 个答案: