html - 创建一个自动滚动水平适合 div 宽度的单行文本表

Question

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

这是当前代码:

<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

兄弟检查一下这个 fiddle ，这就是你想要的，所以你把卷轴放在了错误的地方

<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;
   }

这是 fiddle

https://jsfiddle.net/a5qe4nvj/