Question

我在Angular / html / css中创建了一个包含单元格的表格，我的单元格必须能够容纳大量文本。我的问题只是文本将溢出单元格，我需要它才适合内部，所以看起来不错。

这是我的角度html代码：

＆＃13;

.theTable {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  max-width: 450px;
  width: 200%;
  border: 2px solid #9e9e9e;
  text-align: left;
  padding: 15px;
  font-size: 2vh;
}

td {}

tr:nth-child(even) {
  background-color: #d3d3d3;
}

＆＃13;

<div class="theTable">
  <table>
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>ErrorMessage</th>
        <th>StackTrace</th>
      </tr>
    </thead>
    <tr *ngFor="let item of ListOfStuff">
      <td>{{item.id}}</td>
      <td>{{item.automatedTestName}}</td>
      <td>{{item.errorMessage}}</td>
      <td>{{item.stackTrace}}</td>
    </tr>
  </table>
</div>

＆＃13;

Answer 1

尝试在[word-wrap: break-word]

中使用td

td {
  word-wrap: break-word
  width: 200px;
}

Answer 2

问题是你没有空格就有长话。对word-break:break-all元素使用td。它将打破没有空格的长文本。

.theTable td {
  word-break:break-all;
}

此外，当您编写CSS时，请不要直接定位元素，例如td或tr。因为这将适用于您网页中的所有位置。使用特定类定位元素或在主表中保留一个类，并始终引用该类以定位内部元素，如下所示。

.theTable {
   font-family: arial, sans-serif;
   border-collapse: collapse;
   width: 100%;
 }

 .theTable td,.theTable th {
   max-width: 450px;
   width: 200%;
   border: 2px solid #9e9e9e;
   text-align: left;
   padding: 15px;
   font-size: 2vh;
 }

 .theTable td {}

 .theTable tr:nth-child(even) {
    background-color: #d3d3d3;
 }

您错过了<tbody>错误的表格结构，并将font-family: arial, sans-serif; border-collapse: collapse; width: 100%;用于div元素，而不是table。更新您的代码，如下所示。

 .theTable table {
   font-family: arial, sans-serif;
   border-collapse: collapse;
   width: 100%;
 }

 <div class="theTable">
   <table>
     <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>ErrorMessage</th>
          <th>StackTrace</th>
        </tr>
     </thead>
     <tbody>
        <tr *ngFor="let item of ListOfStuff">
            <td>{{item.id}}</td>
            <td>{{item.automatedTestName}}</td>
            <td>{{item.errorMessage}}</td>
            <td>{{item.stackTrace}}</td>
        </tr>
     </tbody> 
  </table>
 </div>

如何使大量文本适合html表格单元格

2 个答案: