Question

我有一个表，希望将其最右边的列固定，并且标题和正文应可滚动。

为固定为http://jsfiddle.net/emn13/YMvk9/的左列找到了类似的链接但无法实现右列。

        body { font:16px Calibri;}
        table { border-collapse:separate; border-top: 3px solid grey; }
        td, th {
            margin:0;
            border:3px solid grey; 
            border-top-width:0px; 
            white-space:nowrap;
        }
        div { 
            width: 600px; 
            overflow-x:scroll;  
            margin-left:5em; 
            overflow-y:visible;
            padding-bottom:1px;
        }
        .headcol {
            position:absolute; 
            width:5em; 
            left:0;
            top:auto;
            border-right: 0px none black; 
            border-top-width:3px; /*only relevant for first row*/
            margin-top:-3px; /*compensate for top border*/
        }
        .headcol:before {content: 'Row ';}
        .long { background:yellow; letter-spacing:1em; }

<div><table>
        <tr><th class="headcol">1</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">2</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">3</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">4</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">5</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">6</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">7</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">8</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">9</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
</table></div>

Answer 1

您需要对CSS进行cdo更改，如下所示：像下面那样更改css

 div { 
            width: auto; /*changed changed width 600px to auto*/
            overflow-x:scroll;  
            margin-right:5em; /*changed margin-left:5em to margin-right:5em*/
            overflow-y:visible;
            padding-bottom:1px; 
        }
        .headcol {
            position:absolute; 
            width:5em; 
            right:0; /*changed left:0 to right: 0*/
            top:auto;
            border-right: 0px none black; 
            border-top-width:3px; /*only relevant for first row*/
            margin-top:-3px; /*compensate for top border*/
        }
        .headcol:after{content: 'Row ';}

body {
  font: 16px Calibri;
}

table {
  border-collapse: separate;
  border-top: 3px solid grey;
}

td {
  margin: 0;
  border: 3px solid grey;
  border-top-width: 0px;
  white-space: nowrap;
}

div {
  width: auto;
  overflow-x: scroll;
  margin-right: 5em;
  overflow-y: visible;
  padding-bottom: 1px;
}

.headcol {
  position: absolute;
  width: 5em;
  right: 0;
  top: auto;
  border-right: 0px none black;
  border-top-width: 3px;
  /*only relevant for first row*/
  margin-top: -3px;
  /*compensate for top border*/
}

.headcol:after {
  content: 'Row ';
}

.long {
  background: yellow;
  letter-spacing: 1em;
}

<div>
  <table>
    <tr>
      <td class="headcol">1</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <td class="headcol">2</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <td class="headcol">3</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <td class="headcol">4</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <td class="headcol">5</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <td class="headcol">6</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <td class="headcol">7</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <td class="headcol">8</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <td class="headcol">9</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
  </table>
</div>

Answer 2

我已经在下面的JSFiddle中实现了您正在尝试的内容。 HTML

<div>
 <table>
<tr>
  <th class="headcol">1</th>
  <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
  <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
  <th class="headcol">2</th>
  <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
  <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>

CSS`body { 字体：16px Calibri； }

    table {
      border-collapse: separate;
      border-top: 3px solid grey;
    }

    td,
    th {
      margin: 0;
      border: 3px solid grey;
      border-top-width: 0px;
      white-space: nowrap;
    }


    div {
      width: 580px;
      overflow-x: scroll;

      overflow-y: visible;
      padding-bottom: 1px;
    }

    .headcol {
      position: absolute;
      width: 5em;
      right: 0;
      top: auto;
      border-right: 0px none black;
      border-top-width: 3px;
      /*only relevant for first row*/
      margin-top: -3px;
      /*compensate for top border*/
    }

    .headcol:before {
      content: 'Row ';
    }

    .long {
      background: yellow;
      letter-spacing: 1em;
    }

`

http://jsfiddle.net/twcb2o05/

如何使用CSS冻结HTML表格中最右边的列？

2 个答案: