Question

我需要帮助来创建一个适合div宽度的表格，如果它大于竞争者，则自动添加一个水平滚动条。我还希望表格每个字段只有一行。

这是当前的代码：

<div id="RiepilogoDatiSito">
    <table>
      <thead >
        <tr><td> . . .</td></tr>
      </thead>
      <tbody>
         <tr . . .>
            <td>. . .</td>
          </tr>
       </tbody>
    </table>
</div>

然后是css

#RiepilogoDatiSito{
  clear: both;
  max-width: 100%;
  height: 70%;

  min-height: 200px;
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

table {
  table-layout: fixed;
  width: 100%;
  border: 1px solid red;
  overflow-x: scroll;
  overflow-y: scroll;
}



td { 
   border: 1px solid blue;
   white-space:nowrap;
}

Answer 1

兄弟检查这个小提琴，你想要什么，所以你把卷轴放在错误的地方

<div id="RiepilogoDatiSito">
<table>
  <thead >
    <tr><td> . . .</td></tr>
  </thead>
  <tbody>
     <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
               <tr . . .>
        <td>. . .</td>
      </tr>
   </tbody>
   </table>
   </div>

你的css应该是这样的

#RiepilogoDatiSito{

clear: both;
width: 100%;
 height: 300px!important;
 overflow-x: scroll;
 overflow-y: scroll;
  min-height: 200px;
  display:block;
  }

 table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
 }

 table {
 table-layout: fixed;
 width: 100%;
 border: 1px solid red;

 }



  td { 
  border: 1px solid blue;
  white-space:nowrap;
   }

这里是小提琴

https://jsfiddle.net/a5qe4nvj/

创建一行文本表，自动滚动水平拟合div宽度

1 个答案: