TablePress 如何设定列宽?

WordPress 表格插件 TablePress 提供了方便的自定义 CSS 功能来满足不同表格、不同场合的样式需求。作为示例,这里介绍了如何使用 TablePress 内建的 CSS 类(样式选择器)来给 TablePress 表格的特定列或特定单元格设置需要的宽度。

如果还不清楚怎么使用 TablePress 中的自定义样式,可以参考指定 TablePress 表格某行/某列的背景色,这里有详细的操作说明。

使用下面的自定义样式:

.tablepress-id-N .column-2 {
	width: 100px;
}

这里 N 应该用要设定的表格的 ID 替换。如果要对网站中所有用 TablePress 插入的表格应用此设定,可以用 .tablepress 替换到样式中前面的 .tablepress-id-N

这介绍的只是一般的使用方法。可以根据需要多次使用这个样式,当然,每次都应该将里面的 column 后面的数字调整为需要针对的列号。

注意:很多情况下不需要直接设定列的宽度!可以减小 padding(单元格中的文本与单元格边框之间的空白)来达到目的。使用下面的自定义 CSS 样式:

.tablepress-id-N .column-2 {
	padding: 4px;
}

当然具体的数值(这里是 4 个像素)需要根据情况调整。

如果需要关于 TablePress 的其它帮助,请访问 TablePress 中文页面获取更多信息。TablePress 常见问题页面还有更多自定义 CSS 样式的示例及其他问题的解决方法,欢迎查阅。©

本文发表于水景一页。永久链接:<http://cnzhx.net/blog/tablepress-faq_set-column-width/>。转载请保留此信息及相应链接。

26 条关于 “TablePress 如何设定列宽?” 的评论

  1. 这两天从你这里学习到了很多tabepress的用法以及设置,刚才建了个表格,太宽了,所以就找到你这篇文章了,太感谢了,顺便帮你点两个广告,呵呵

  2. 对了,请问一下,你说的代码可以直接在tabletpress后台里面添加么,还是需要找到相应的CSS文件来修改呢,谢了:)

  3. 請問怎麼修改整個框架的寬度?
    不想要是滿板
    可以的話請用email回信給我^^~

    • 整个框架的高度可以通过 #tablepress-_wrapper 来设定,注意将其中的 替换成对应的表格 ID 即可。
      例如,

      #tablepress-2_wrapper {
      height: 300px;
      }
      

      但是这样其实很难控制好具体的高度数值,你可以多次尝试。

  4. 在哪个css里加呢?因为有些文件被限制权限,不能直接更改,需要知道改哪个,这边才能开放权限,我改过几个css权限为777,但设置还是无效
    .tablepress .column-2 {
    padding: 4px;
    }

      • 前面打钩了,这个没问题
        代码复制进去了,这也没问题
        .tablepress .column-2 {
        padding: 4px;
        }
        就是在点击保存更改时,出现这样的提示:
        因为您的服务器配置,TablePress 不能自动保存您的“自定义 CSS” 到一个文件。
        要使用您更新插件或者主题的同样的方法再试一次,请填写下面的“连接信息”表单。【因为wordpress默认是ftp登陆,而我的服务器是sftp,所以这个登陆服务器的表单就无法登陆了】
        我已经修改style.css的权限为777了

        • TablePress 会先尝试将自定义 CSS 保存到 wp-content 文件夹下的插件目录里,如果失败(如你所说,没有权限)怎会在错误提示页面的底部有替代的方法,按钮显示为“直接执行而不将“自定义 CSS”保存为文件”,你点击这个按钮就可以了。然后自定义 CSS 会直接通过 wp_head() 输出到页面的 head 里面(这是 css 的 inline 方式)。
          当然,这就要求你的wp主题的 header.php 文件中必须有 wp_head() 调用(这是 WP 的标准形式)。

    • 你可能需要强制刷新页面才会加载新的 style.css 文件。因为 cache 的原因。
      我刚看了这个页面,你设置为 padding 20 是已经生效了的。

      • 非常感谢回复,今天虽然是个节,但不能祝你了,哈,开个玩笑

        http://zhuanshouhui.com/96.html
        http://zhuanshouhui.com/86.html
        这两个为什么会展示的不一样呢?

        我已经停用css控制列宽了,去掉在style.css中的相关代码了。
        此外,我点过这个【直接执行而不将“自定义 CSS”保存为文件】,能反向取消吗?这个是针对全部表格吗?如果点击是针对全部表格,那两个链接展示为何不同呢?

        我想让【微博】这一列,能在一行显示全数字,有点不会搞,老兄能否开个详细的页面解说下列宽设置(估计这个将来会有极多人遇到问题),省的以后N多人咨询你了,呵呵

  5. 我是通过 导入–手工输入 的方式放入表格的(从txt文本里复制)
    在上传完表格后,有个预览功能,其实我想显示成预览那样,(微博 昵称)只在一行显示

    • 反向取消是没有这个东西的,不过,如果没有权限问题的话,再次到插件选项页面保存的时候就会创建对应的 /wp-content/tablepress-custom.css 文件了。
      TablePress 默认是自动调整列宽的。你的表格里的内容不同,它就会有不同的宽度。
      这个实际上不是 TablePress 的问题,而是样式问题。建议你去了解一下。
      对于你这个特定的问题,给你建议一个自定义 CSS 如下,

      .tablepress .column-1,
      .tablepress .column-2 {
        word-break: normal;
      }
  6. 引用通告: 插件推荐:如何在wordpress中插入表格 | 指月营销丨营销顾问

雁过留声,人过留名

您的电子邮箱地址不会被公开。 必填项已用 * 标注

特别提示:与当前文章主题无关的讨论相关但需要较多讨论求助信息请发布到水景一页讨论区的相应版块,谢谢您的理解与合作!请参考本站互助指南
您可以在评论中使用如下的 HTML 标记来辅助表达: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>