Мне нужно отображать таблицы разной высоты (строк) в строке с возможностью прокрутки (слева, потому что это rtl).

Это что-то вроде 20 или 30 столов. Спасибо за помощь!

Ниже приведен 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>
1
Hay Hayil 1 Янв 2018 в 15:53

2 ответа

Лучший ответ

Использование display:inline-table и float:right не обязательно

И вам нужно использовать white-space:nowrap в контейнере div.

< Сильного > Demo

.point
{
   display:inline-table;
   border:1px solid #000;
}
<div style='overflow: scroll;display: block;white-space:nowrap;'>
  <table class="point">
    <thead>
      <tr>
        <td>
          <label class="sp">point</label>
          <label class="pm"> </label><br>
        </td>
        <td>
          <label class="sp">point</label>
          <label class="pm"> </label><br>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <label>point</label>
          <label>point</label>
          <label></label>
        </td>
        <td>
          <label>point</label>
          <label>point</label>
          <label></label>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="point">
    <thead>
      <tr>
        <td>
          <label class="sp">point</label>
          <label class="pm"> </label><br>
        </td>
        <td>
          <label class="sp">point</label>
          <label class="pm"> </label><br>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <label>point</label>
          <label>point</label>
          <label></label>
        </td>
        <td>
          <label>point</label>
          <label>point</label>
          <label></label>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="point">
    <thead>
      <tr>
        <td>
          <label class="sp">point</label>
          <label class="pm"> </label><br>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <label>point</label>
          <label>point</label>
          <label></label>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="point">
    <thead>
      <tr>
        <td>
          <label class="sp">point</label>
          <label class="pm"> </label><br>
        </td>
        <td>
          <label class="sp">point</label>
          <label class="pm"> </label><br>
        </td>
        <td>
          <label class="sp">point</label>
          <label class="pm"> </label><br>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <label>point</label>
          <label>point</label>
        </td>
        <td>
          <label>point</label>
          <label>point</label>
        </td>
        <td>
          <label>point</label>
          <label>point</label>
        </td>
      </tr>
    </tbody>
  </table>
</div>
0
gurvinder372 1 Янв 2018 в 13:06

Как насчет использования 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>
0
RoyBarOn 1 Янв 2018 в 13:13