Question

我想要一个不标准的桌子。这应该是它的样子：

这是我的demo。正如你在那里看到的那样，第一列的宽度增加了文本，但我不想要这种行为。我希望文本从左到右整行。

更新：对于那些想要提问的人。请阅读以下内容。

我不能将其他tr和td与colspan一起使用。我对表使用angular2和datatables.net，它会破坏选择并获取所选数据。

Answer 1

使用colspan

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table class="table">
   <thead>
      <tr>
         <th>First Name</th>
         <th>Last Name</th>
         <th>Username</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Mark
            <div>Age: 18</div>
            <div>Income: 85</div>
             
        </td>
         <td>Otto</td>
         <td>@mdo</td>
      </tr>
     <tr>
       <td colspan="3"><div>
               <span>Note:</span>
               <span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
             </div>
       </td>
     </tr>
      <tr>
         <td>Jacob</td>
         <td>Thornton</td>
         <td>@fat</td>
      </tr>
      <tr>
         <td>Larry</td>
         <td>the Bird</td>
         <td>@twitter</td>
      </tr>
   </tbody>
</table>
  
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

因为您不想使用额外的tr，所以您可以使用css

来使用此方法

.tr-holder>td {
  padding-bottom: 35px !important;
}
.full-width {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 0 9px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table class="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr class="tr-holder"> <!-- class added -->
      <td>Mark
        <div>Age: 18</div>
        <div>Income: 85</div>
        <div class="full-width"> <!-- class added -->
          <span>Note:</span>
          <span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
        </div>
      </td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>

    </tr>
    <tr>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

  
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

Answer 2

指定表格的宽度。

将此css属性添加到样式表中。它将正常工作

 table
    {
        table-layout: fixed;
        width: 100px;
    }

我添加了下面的代码段。

＆＃13;

table
{
    table-layout: fixed;
    width: 100px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table class="table">
   <thead>
      <tr>
         <th>First Name</th>
         <th>Last Name</th>
         <th>Username</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Mark
            <div>Age: 18</div>
            <div>Income: 85</div>
             <div>
               <span>Note:</span>
               <span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
             </div>
        </td>
         <td>Otto</td>
         <td>@mdo</td>
      </tr>
      <tr>
         <td>Jacob</td>
         <td>Thornton</td>
         <td>@fat</td>
      </tr>
      <tr>
         <td>Larry</td>
         <td>the Bird</td>
         <td>@twitter</td>
      </tr>
   </tbody>
</table>
  
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

＆＃13;

或者您可以将样式应用于 td div ，如

td div {width：100px;溢出：隐藏; }

＆＃13;

td div { width: 100px; overflow: hidden; }

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table class="table">
   <thead>
      <tr>
         <th>First Name</th>
         <th>Last Name</th>
         <th>Username</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Mark
            <div>Age: 18</div>
            <div>Income: 85</div>
             <div>
               <span>Note:</span>
               <span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
             </div>
        </td>
         <td>Otto</td>
         <td>@mdo</td>
      </tr>
      <tr>
         <td>Jacob</td>
         <td>Thornton</td>
         <td>@fat</td>
      </tr>
      <tr>
         <td>Larry</td>
         <td>the Bird</td>
         <td>@twitter</td>
      </tr>
   </tbody>
</table>
  
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

＆＃13;

Answer 3

您还可以添加内联CSS

<td style="max-width:50px;">Mark
    <div>Age: 18</div>
    <div>Income: 85</div>
    <div>
      <span>Note:</span>
     <span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
    </div>
</td>

Answer 4

您可以使用类似bootstrap或基础的东西来模拟表结构

单元格的内容应占用所有行而不更改列宽

4 个答案: