我无法让我的桌子响应答案

【问题标题】：I can't get my table responsive我无法让我的桌子响应
【发布时间】：2018-01-13 08:45:15
【问题描述】：

我有这张桌子：

<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/

我的问题在哪里？

【问题讨论】：

类名应该是table.vysledky而不是table .vysledky！
@undefined 谢谢，但这也不起作用。我已经进行了编辑并在网站上发布了一个链接，您可以自己尝试。
table .vysledky 和 table.vysledky 在这种情况下在 CSS 中是相同的。
表格不会溢出（:scroll），它会扩展（或缩小，如果没有调整大小）到它所包含的内容。你需要一个可以溢出和滚动或重置显示的包装器
@GCyrillus 谢谢

标签： html css responsive-design html-table

【解决方案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/

【讨论】：

【解决方案2】：

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

但实际上你根本不需要这张桌子！你可以通过类名选择元素，使用.vysledky { property: stuff; }

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

【讨论】：

您好，谢谢您的回答，但它不起作用！我已经编辑了问题，您可以访问该网站，这样您就可以看到它不起作用