【问题标题】:How to change table width如何更改表格宽度
【发布时间】:2013-05-04 11:55:02
【问题描述】:

我正在尝试将表格宽度减小到 700px

表格位于购物车总计 h2>下方,无论我如何应用“宽度:700px;”表格不会变小。

http://clients.rocoru.com/trendyheadboards/?page_id=6

【问题讨论】:

  • 能否提供一些 HTML 和 CSS 代码?
  • 出现“您的购物车目前是空的”。并且看不到“购物车总计”标题。
  • 表格可能会继承一些样式。我没有看css,但你可以试试width: 700px !important;
  • 请向我们提供一些细节。到目前为止你给我们的定义太模糊了,链接没有显示任何表格。 Rgds,
  • @AlexBell 要查看他的表格,您必须将一个项目添加到购物车;)但我同意 - 提供一个直接的例子会 - 很好 - 很好?

标签: html css woocommerce


【解决方案1】:

您的问题是master.css, line 687 中的以下规则:

#costing-container, .shipping {
  width: 980px;
  border-top: 1px dotted #ccc;
}

您将shippingclass 应用于表格内的 tr,从而将其拉伸到 980 像素。如果您删除该类或将其宽度规则更改为 700px,您的表格将按您希望的方式显示。

【讨论】:

    【解决方案2】:

    Johannes 提供的答案听起来是正确的,但如果您不想修改 master.css 文件,请尝试将id 应用于有问题的表并将其他 css 更改为

    #table_id tr {
        width: 700px !important;
    }
    

    这应该确保您的样式不会缩小其他 table 元素。

    【讨论】:

    • 其实这行不通。将width: 700px !important 应用于表格,表格仍然会拉伸到 980 像素。但是,如果规则针对所述表的 tr 元素,它将起作用。
    猜你喜欢
    • 2017-01-25
    • 1970-01-01
    • 2012-01-02
    • 1970-01-01
    • 2012-11-19
    • 2017-01-30
    • 2015-11-06
    • 1970-01-01
    • 2018-01-04
    相关资源
    最近更新 更多