如何修复我的表格，以便在重新调整窗口大小时列不会扩展？

【问题标题】：How do I fix my table so that the columns don't expand on re-sizing of the window?如何修复我的表格，以便在重新调整窗口大小时列不会扩展？
【发布时间】：2014-04-14 22:53:19
【问题描述】：

我有以下 HTML 表格和相关的 CSS - http://jsfiddle.net/67LE7/

我认为这是导致问题的 CSS

.content {
      position: relative;
      max-width: 944px;
      min-width: 200px;
      margin: 0 auto;
      display: flex;
      justify-content: center;    
}

当我水平扩展结果窗口时，第一列无限扩展并将第二和第三列推到下一行。预期结果是所有三列都保持固定大小并出现在同一行上。我究竟做错了什么？

【问题讨论】：

标签： html css width css-tables

【解决方案1】：

您需要设置一个固定宽度的定价表并删除媒体查询。媒体查询正在重置宽度。媒体查询会让它在手机和平板电脑上看起来不错，但如果您不需要...

updated fiddle

.pricing-table{
    width: 150px;

/*@media (max-width: 768px) {
    .pricing-table{
        width: 48.9%;
    }
}
@media (max-width: 480px) {
    .pricing-table{
        width: 100%;
        margin: 0 0 10px;
    }
}*/

【讨论】：

感谢您的解释。有趣的是，它在手机和平板电脑上看起来更糟。今晚晚些时候我将尝试将代码上传到服务器，以便您了解我的意思。