Question

我有这张桌子：

<TABLE class=vysledky >
  <TR class=podtrzeni>
    <TD width="39" height="19">Pořadí <br /> Liga</TD>
    <TD width="39" height="19">Pořadí <br /> Tým</TD>
    <TD width="394" height="19">Jméno</TD>
    <TD width="58" height="19">Z</TD>
    <TD width="58" height="19">G</TD>
    <TD width="59" height="19">A</TD>
    <TD width="59" height="19">PPG</TD>
    <TD width="59" height="19">SHG</TD> 
    <TD width="59" height="19">KB</TD>
    <TD width="59" height="19">TRM</TD>
    <TD width="59" height="19">MT</TD>
    <TD width="59" height="19">VT</TD>
    <TD width="59" height="19">OT</TD>
    <TD width="59" height="19">OK</TD>
    <TD width="59" height="19">TH</TD>
    <TD width="59" height="19" nowrap="nowrap">Prům. G</TD>
    <TD width="59" height="19" nowrap="nowrap">Prům. TM</TD>
  </tr>

我尝试以多种方式对其负责：

table.vysledky {
    overflow: auto; }
/* I have tried also overflow: scroll;
                     overflow-x: scroll; (auto)*/

另外，我尝试过HTML方式：

<TABLE class=vysledky style="Overflow: auto;" <!--scroll, etc--> >

上述所有内容均不适用于我的网站。

http://skkelti.cz/statistiky/

我的问题在哪里？

Answer 1

您必须将表格包裹在div中，然后将overflow和width应用于div。像这样：

HTML：

<div class="table_container">
  <table class=vysledky border="1">
    <tr class=podtrzeni>
      <TD width="39" height="19">Pořadí <br /> Liga</TD>
      <TD width="39" height="19">Pořadí <br /> Tým</TD>
      <TD width="394" height="19">Jméno</TD>
      <TD width="58" height="19">Z</TD>
      <TD width="58" height="19">G</TD>
      <TD width="59" height="19">A</TD>
      <TD width="59" height="19">PPG</TD>
      <TD width="59" height="19">SHG</TD> 
      <TD width="59" height="19">KB</TD>
      <TD width="59" height="19">TRM</TD>
      <TD width="59" height="19">MT</TD>
      <TD width="59" height="19">VT</TD>
      <TD width="59" height="19">OT</TD>
      <TD width="59" height="19">OK</TD>
      <TD width="59" height="19">TH</TD>
      <TD width="59" height="19" nowrap="nowrap">Prům. G</TD>
      <TD width="59" height="19" nowrap="nowrap">Prům. TM</TD>
    </tr> 
  </table>
</div>

CSS：

.table_container{
  width: 100%; /* PUT YOUR DESIRED WIDTH HERE */
  overflow-x: auto;
}

工作示例：https://jsfiddle.net/aob3hqoz/

Answer 2

你的选择器错了。要选择表格，正确的答案是table.vysledky。

但实际上你根本不需要桌子！您可以使用.vysledky { property: stuff; }

按类名选择元素

根据您拥有的表数，您可能需要使用ID。选择一个类会返回一个数组（即使它是一个数组），而id将始终返回一个对象。

我不能让我的桌子响应

2 个答案: