您在这里：首页 » 互联网 » WordPress » TablePress 如何设定列宽？

TablePress 如何设定列宽？

发表于 2013-05-20 作者 H Zeng
更新于 2013-05-22
浏览 5,119 次

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 个像素）需要根据情况调整。

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

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

haswell ultrabook 于 2013-07-11, 02:04 留言：

这两天从你这里学习到了很多tabepress的用法以及设置，刚才建了个表格，太宽了，所以就找到你这篇文章了，太感谢了，顺便帮你点两个广告，呵呵
- Haoxian Zeng 于 2013-07-12, 07:25 留言：
  
  谢谢，不过其实帮忙点的广告一般不会被计费的
haswell ultrabook 于 2013-07-11, 02:06 留言：

对了，请问一下，你说的代码可以直接在tabletpress后台里面添加么，还是需要找到相应的CSS文件来修改呢，谢了：）
- Haoxian Zeng 于 2013-07-12, 07:26 留言：
  
  第一段第二个超链接即是答案。
  还可以看看这里的关于自定义样式的补充说明。
Calvin 于 2013-12-25, 16:06 留言：

請問怎麼修改整個框架的寬度?
不想要是滿板
可以的話請用email回信給我^^~
- Haoxian Zeng 于 2013-12-25, 16:49 留言：
  整个框架的高度可以通过 #tablepress-_wrapper 来设定，注意将其中的替换成对应的表格 ID 即可。
  例如，
```
#tablepress-2_wrapper {
height: 300px;
}
```
  但是这样其实很难控制好具体的高度数值，你可以多次尝试。
指月营销于 2014-08-10, 17:40 留言：

在哪个css里加呢？因为有些文件被限制权限，不能直接更改，需要知道改哪个，这边才能开放权限，我改过几个css权限为777，但设置还是无效
.tablepress .column-2 {
padding: 4px;
}
- Haoxian Zeng 于 2014-08-10, 17:51 留言：
  
  嗯，请参考此文开头第二个超链接文章的第二段。
  - 指月营销于 2014-08-10, 17:59 留言：
    
    前面打钩了，这个没问题
    代码复制进去了，这也没问题
    .tablepress .column-2 {
    padding: 4px;
    }
    就是在点击保存更改时，出现这样的提示：
    因为您的服务器配置，TablePress 不能自动保存您的“自定义 CSS” 到一个文件。
    要使用您更新插件或者主题的同样的方法再试一次，请填写下面的“连接信息”表单。【因为wordpress默认是ftp登陆，而我的服务器是sftp，所以这个登陆服务器的表单就无法登陆了】
    我已经修改style.css的权限为777了
    - Haoxian Zeng 于 2014-08-10, 19:23 留言：
      
      TablePress 会先尝试将自定义 CSS 保存到 wp-content 文件夹下的插件目录里，如果失败（如你所说，没有权限）怎会在错误提示页面的底部有替代的方法，按钮显示为“直接执行而不将“自定义 CSS”保存为文件”，你点击这个按钮就可以了。然后自定义 CSS 会直接通过 wp_head() 输出到页面的 head 里面（这是 css 的 inline 方式）。
      当然，这就要求你的wp主题的 header.php 文件中必须有 wp_head() 调用（这是 WP 的标准形式）。
指月营销于 2014-08-10, 18:00 留言：

http://zhuanshouhui.com/86.html 问题表格地址，要修改列宽
指月营销于 2014-08-10, 18:05 留言：

http://zhuanshouhui.com/86.html
我在style.css直接将代码复制进去保存了，但页面貌似也没变
所以，现在疑惑的是针对的是哪个css在做修改？我好去修改下权限
- Haoxian Zeng 于 2014-08-10, 19:24 留言：
  
  你可能需要强制刷新页面才会加载新的 style.css 文件。因为 cache 的原因。
  我刚看了这个页面，你设置为 padding 20 是已经生效了的。
  - 指月营销于 2014-08-10, 22:40 留言：
    
    非常感谢回复，今天虽然是个节，但不能祝你了，哈，开个玩笑
    
    http://zhuanshouhui.com/96.html
    http://zhuanshouhui.com/86.html
    这两个为什么会展示的不一样呢？
    
    我已经停用css控制列宽了，去掉在style.css中的相关代码了。
    此外，我点过这个【直接执行而不将“自定义 CSS”保存为文件】，能反向取消吗？这个是针对全部表格吗？如果点击是针对全部表格，那两个链接展示为何不同呢？
    
    我想让【微博】这一列，能在一行显示全数字，有点不会搞，老兄能否开个详细的页面解说下列宽设置（估计这个将来会有极多人遇到问题），省的以后N多人咨询你了，呵呵
指月营销于 2014-08-10, 23:03 留言：

我是通过导入–手工输入的方式放入表格的（从txt文本里复制）
在上传完表格后，有个预览功能，其实我想显示成预览那样，（微博昵称）只在一行显示
指月营销于 2014-08-10, 23:10 留言：

同样的发布，结果却不同
http://zhuanshouhui.com/107.html 微博下数字显示3行
http://zhuanshouhui.com/103.html 微博下数字显示3行
- Haoxian Zeng 于 2014-08-10, 23:13 留言：
  反向取消是没有这个东西的，不过，如果没有权限问题的话，再次到插件选项页面保存的时候就会创建对应的 /wp-content/tablepress-custom.css 文件了。
  TablePress 默认是自动调整列宽的。你的表格里的内容不同，它就会有不同的宽度。
  这个实际上不是 TablePress 的问题，而是样式问题。建议你去了解一下。
  对于你这个特定的问题，给你建议一个自定义 CSS 如下，
```
.tablepress .column-1,
.tablepress .column-2 {
  word-break: normal;
}
```
  - 指月营销于 2014-08-10, 23:34 留言：
    
    感谢博主回复，问题确实有点多，对于一个小白来说，也希望我的问题，博主的回复，为以后看到帖子的同学带来一种解答，再次感谢博主！
    - Haoxian Zeng 于 2014-08-10, 23:36 留言：
      
      我看你又提交了两个新网页。刚才给你建议的方法没解决问题吗？
      - 指月营销于 2014-08-10, 23:41 留言：
        
        正准备用博主的建议，之前是怕我这边改了后，你那看不到我说的错误，呵呵，现在我就按照你的那个代码，加入到style.css里面试试哈，
    - 指月营销于 2014-08-10, 23:41 留言：
      
      附带一个说明：
      用的是360正常浏览器
      后来换了个火狐浏览器，浏览的展现不一样
      - Haoxian Zeng 于 2014-08-10, 23:45 留言：
        
        看到你已经改过了。360浏览器本质上就是IE，也许还是低版本的，我目前没法测试。看到在 Chrome 和 Firefox 里都挺正常的。
    - Haoxian Zeng 于 2014-08-10, 23:41 留言：
      
      我在你的网站上测试过了，这样就可以了。为了好看，可以在刚才的样式代码的 { } 里面再加上这条：
      
      vertical-align: middle;
      - 指月营销于 2014-08-10, 23:43 留言：
        
        非常感谢，非常感谢啊，解决了
        
        Haoxian Zeng 于 2014-08-10, 23:47 留言：
        
        不用客气，互帮互助嘛 :) 大家都是慢慢这样成长起来的。
引用通告：插件推荐：如何在wordpress中插入表格 | 指月营销丨营销顾问