JSFiddle - React, Tailwind, and code Playground

by niphor

HTML

<div class="example">
  <p>直接放一个td在里面，当display不为none时，会计算宽度(IE下问题更清楚)</p>
  <table id="example1" border="1" cellpadding="1" cellspacing="1">
    <thead>
      <tr>
        <td width="60%">表头</td>
        <td width="20%">表头</td>
        <td width="20%">表头</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td class="menu">4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td class="menu">4</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="example">
  <p>当其中一个或多个td为自动撑宽度的时候，这是div所在td的padding将影响位置</p>
  <table id="example2" border="1" cellpadding="1" cellspacing="1">
    <thead>
      <tr>
        <td width="61%">表头</td>
        <td width="20%">表头</td>
        <td width="20%">表头</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="menu">4</div>1
        </td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>
          <div class="menu">4</div>1
        </td>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="example">
  <p>用block形式的li，当只有第一列能自动充满，其余固定时（用float要注意顺序）</p>
  <ul id="example3">
   <li class="clearfix1">
     <div class="col-3">表头</div>
     <div class="col-2">表头</div>
     <div class="col-1">表头</div>
    </li>
    <li class="clearfix1">
     <div class="col-4">4</div>
     <div class="col-3">3</div>
     <div class="col-2">2</div>
     <div class="col-1">1</div>
   </li>
    <li class="clearfix1">
     <div class="col-4">4</div>
     <div class="col-3">3</div>
     <div class="col-2">2</div>
     <div class="col-1">1</div>
   </li>
  </ul>
</div>

<div class="example">
  <p>table只用来显示一行（IE8以上可用display：table代替）</p>
  <ul id="example4">
   <li class="clearfix1">
     <table border="1" cellpadding="1" cellspacing="1">
      <tbody>
        <tr>
          <td width="61%">表头</td>
          <td width="20%">表头</td>
          <td...

CSS

.example{
    margin:0 auto;
    width:60%;
    margin-bottom:20px;
    border:1px solid green;
    padding:4px;
}
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}

/*例子1*/
#example1,
#example1 td,
#example1 tr{
    box-sizing: border-box;
}

#example1{
    position:relative;
    width:100%;
    border:1px solid black;
    
}
#example1 .menu{
    position:absolute;
    left:0;
    width:0;
    text-align: center;
    overflow: hidden;
    border: none;
    padding:0;
    margin:0;
}
#example1 tr:hover .menu{
    width:100%;
    border:1px solid red;
}
/*例子2*/
#example2,
#example2 td,
#example2 tr
#example2 .menu{
    box-sizing: border-box;
}

#example2{
    position:relative;
    width:100%;
    border:1px solid black;
    
}
#example2 tr{
    position:relative;
}
#example2 .menu{
    margin-top:-1px;
    margin-left:-1px;
    position:absolute;
    text-align: center;
    left:0;
    width:0;
    overflow: hidden;
    border: none;
}
#example2 tr:hover .menu{
    width:100%;
    border:1px solid red;
}

/*例子3*/
#example3,
#example3 *{
    box-sizing: border-box;
}

#example3{
    padding:0;
    margin:0;
    border-top:1px solid black;
    border-left:1px solid black;
    list-style-type:none;
}
#example3 li{
    list-style-type:none;
    border-bottom:1px solid black;
    position:relative;
}

#example3 .col-1{
    border-right:1px solid black;
    margin-right:180px;
}

#example3 .col-2{
    border-right:1px solid black;
    float:right;
    width:100px;
}
#example3 .col-3{
    border-right:1px solid black;
    float:right;
    width:80px;
}
#example3 .col-4{
    border:1px solid red;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    text-align: center;
    display:none;
}
#example3 li:hover .col-4{
    display:block;
}

/*例子4*/
#example4{
   ...