Question

我需要以不同的高度（行）显示内联表格，滚动的能力（左边因为它是rtl）。

这可能就像20张桌子一样。谢谢你的帮助！

以下是包含较少表格的html：

<html>
    <head></head>
    <body>
        <div style='overflow: scroll;display: block;'>  
          <table id="point" style="float: right">
            <thead>
              <tr>
                <td class="textFont" style="font weight:bold;height: 20px">
                  <label class="sp">point</label>
                  <label class="pm"> </label><br>
                </td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="textFont" style="height: 30px;">
                  <label>point</label>
                  <label>point</label>
                  <label></label>
                </td>
             </tr>                                          
            </tbody>
            </table>
    </body>

Answer 1

使用function option1() { var i = 0; document.getElementById("btn0").value = "newButtonValue"; document.getElementById("question").innerHTML = "<?php echo $arr["results"][i++]["question"] ?>"; }并且display:inline-table不是强制性的

您需要在容器float:right上使用white-space:nowrap。

<强>演示

div

.point
{
   display:inline-table;
   border:1px solid #000;
}

Answer 2

如何使用Flex？

<table id="point" style="float: right">
  <thead>
    <tr>
      <td class="textFont" style="font-weight: bold;height: 20px">
        <label class="sp">point</label>
        <label class="pm"> </label><br>
      </td>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td class="textFont" style="height: 30px;">
        <label>point</label>
        <label>point</label>
        
      </td>
      <td class="textFont" style="height: 30px;">
        <label>point</label>
        <label>point</label>
        
      </td>
    </tr>
  </tbody>

</table>

.textFont{
font-weight: bold;
height: 20px;
}

.header{
background-color:#d4d9de;
text-align:center;
}
.wrap{
display:flex;
overflow:scroll;
overflow-y:hidden;
}

table{
border: 1px solid #ddd;
}

<div class="wrap">
<table id="point1">
  <thead>
    <tr>
      <td class="textFont header" colspan="2">
        <label class="sp" >point</label>
        
      </td>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td class="textFont" >
         <label>point point</label>
        <p>point point</p>
 </tr>
 <tr>
    
      <td class="textFont">
        <label>point point</label>
        <p>point point</p>
    </td>
    </tr>
    <tr>
      <td class="textFont">
         <label>point point</label>
        <p>point point</p>
    </td>
    </tr>
  </tbody>

</table>
<table id="point2">
  <thead>
    <tr>
      <td class="textFont header" colspan="2">
        <label class="sp" >point</label>
        
      </td>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td class="textFont" >
         <label>point point</label>
        <p>point point</p>
 </tr>
 <tr>
    
      <td class="textFont">
        <label>point point</label>
        <p>point point</p>
    </td>
    </tr>
    <tr>
      <td class="textFont">
         <label>point point</label>
        <p>point point</p>
    </td>
    </tr>
  </tbody>

</table>
<table id="point3">
  <thead>
    <tr>
      <td class="textFont header" colspan="2">
        <label class="sp" >point</label>
        
      </td>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td class="textFont" >
         <label>point point</label>
        <p>point point</p>
 </tr>
 <tr>
    
      <td class="textFont">
        <label>point point</label>
        <p>point point</p>
    </td>
    </tr>
    <tr>
      <td class="textFont">
         <label>point point</label>
        <p>point point</p>
    </td>
    </tr>
  </tbody>

</table>
<table id="point4">
  <thead>
    <tr>
      <td class="textFont header" colspan="2">
        <label class="sp" >point</label>
        
      </td>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td class="textFont" >
         <label>point point</label>
        <p>point point</p>
 </tr>
 <tr>
    
      <td class="textFont">
        <label>point point</label>
        <p>point point</p>
    </td>
    </tr>
    <tr>
      <td class="textFont">
         <label>point point</label>
        <p>point point</p>
    </td>
    </tr>
  </tbody>

</table>
<table id="point5">
  <thead>
    <tr>
      <td class="textFont header" colspan="2">
        <label class="sp" >point</label>
        
      </td>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td class="textFont" >
         <label>point point</label>
        <p>point point</p>
 </tr>
 <tr>
    
      <td class="textFont">
        <label>point point</label>
        <p>point point</p>
    </td>
    </tr>
    <tr>
      <td class="textFont">
         <label>point point</label>
        <p>point point</p>
    </td>
    </tr>
  </tbody>

</table>
<table id="point6">
  <thead>
    <tr>
      <td class="textFont header" colspan="2">
        <label class="sp" >point</label>
        
      </td>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td class="textFont" >
         <label>point point</label>
        <p>point point</p>
 </tr>
 <tr>
    
      <td class="textFont">
        <label>point point</label>
        <p>point point</p>
    </td>
    </tr>
    <tr>
      <td class="textFont">
         <label>point point</label>
        <p>point point</p>
    </td>
    </tr>
  </tbody>

</table>
<table id="point7">
  <thead>
    <tr>
      <td class="textFont header" colspan="2">
        <label class="sp" >point</label>
        
      </td>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td class="textFont" >
         <label>point point</label>
        <p>point point</p>
 </tr>
 <tr>
    
      <td class="textFont">
        <label>point point</label>
        <p>point point</p>
    </td>
    </tr>
    <tr>
      <td class="textFont">
         <label>point point</label>
        <p>point point</p>
    </td>
    </tr>
  </tbody>

</table>
<table id="point8">
  <thead>
    <tr>
      <td class="textFont header" colspan="2">
        <label class="sp" >point</label>
        
      </td>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td class="textFont" >
         <label>point point</label>
        <p>point point</p>
 </tr>
 <tr>
    
      <td class="textFont">
        <label>point point</label>
        <p>point point</p>
    </td>
    </tr>
    <tr>
      <td class="textFont">
         <label>point point</label>
        <p>point point</p>
    </td>
    </tr>
  </tbody>

</table>
</div>

如何将多个表并排放置在可滚动的内联中

2 个答案: