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

cbwuti44 于 2023-03-14 发布在其他

关注(0)|答案(4)|浏览(214)

我想把一个表居中，但是尽管它在技术上是居中的，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内容的不同长度使它看起来不均匀。
一个二个一个一个
我想要的是td的内容应该在 Package 器中左对齐并居中，就像此图像上的标签（即Cam 1、Cam 2等）：

css

来源：https://stackoverflow.com/questions/46231359/centering-a-table-with-text-align-center

4条答案

按热度按时间

lf3rwulv1#

您可以将width: 50%指定给<td>，使其具有相等的宽度，如下所示：

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

x一个一个一个一个x一个一个二个x
希望这有帮助！

赞(0）回复(0）举报 2023-03-14

cwdobuhd2#

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

赞(0）回复(0）举报 2023-03-14

mo49yndu3#

我想我已经知道你想要什么了...你想要文本左对齐，但是文本的 * 列 * 居中。
你不能只使用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）回复(0）举报 2023-03-14

vh0rcniy4#

你的问题很复杂也不清楚。但是据我所知，你想让一个表格居中，而不是td的文本。为此，你可以在你的表格上使用margin:auto，并删除text-align:center，然后添加width到你的表格（因为全宽不能居中），那么你的表格将不使用任何.wrapper居中。
示例
超文本标记语言

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

中央支助系统

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

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

添加了td的边框，这样你就可以检查td的文本对齐方式了。同时也修改了td的文本（抱歉）。

赞(0）回复(0）举报 2023-03-14

我来回答

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

4条答案

相关问题

热门标签

最新问答