How html does not change the width of the table table table width exceeds the page width (only show the scroll bar)?

Not make things right, study

<!DOCTYPE HTML>
<html>

 

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>设置表格有滚动条</title>
  <style>
   .ell2 {
            max-width: 100px;
            max-height:80px;
            word-break: break-all;
            word-wrap:break-word;
            white-space:pre-wrap;
            text-align:left;
            vertical-align:top;
            border: 1px solid #000;
   }
   .tableclass {
    /* width: 500px;
    height: 100px; */
    /* white-space: nowrap; */
   }
  </style>
 </head>

 

 <body>
  <div style = "border: 1px Solid # 000000; overflow: Auto; White-Space: Normal; width: 310px; height: 200px;">
   <Table style = "White-Space: nowrap; Table-layout: Initial ">
    <TR style =" the display: -webkit-Flex; the display: -ms-of flexbox; ">
     <TD class =" ELL2 "> Ali Baba. 1 </ TD>
     <TD class =" ELL2 "> Alibaba Baba 2 </ TD>
     <TD class = "ELL2"> Alibaba Baba. 3 </ TD>
     <TD class = "ELL2"> Alibaba Baba. 4 </ TD>
    </ TR>
    <TR style = "the display : -webkit-Flex; the display: -ms-of flexbox ">
     <TD class =" ELL2 "> Baba Ali Baba </ TD>
     <TD class =" ELL2 ">Alibaba Baba 2 </ TD>
     <TD class = "ELL2"> Alibaba Baba. 3 </ TD>
     <TD class = "ELL2"> Alibaba Baba. 4 </ TD>
    </ TR>
   </ Table >
  </ div>
  <!-- </div> -->

 

  <div style="border: 1px solid #000000; width: 300px; height: 50px;">
  </div>
  <div style="border: 1px solid #000000; width: 100px; height: 50px;">
   <table>
    <tr>
     <td style="width:100px;">Hello World 1 2 3 Hello World 4 5 6 </td>
    </tr>
   </table>
  </div>
 </body>

</html>

Guess you like

Origin blog.csdn.net/wxmwzz/article/details/93204550