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

Question

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

我相信这是导致问题的 CSS

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

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

Answer 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;
    }
}*/