Custom CSS column widths not working properly

Resolved srknight
(@srknight)

9 years, 4 months ago
I am trying to adjust the column widths for my table and although they do change size when I adjust pixel width specified in the code, they are not displaying at the sizes I am setting them at. My code is below:
```
.tablepress-id-3 tbody td {
	font-family: inherit;
	font-size: 14px;
	color: #000000;
}

.tablepress-id-3 .column-1 {
	width: 135px;
}

.tablepress-id-3 .column-2 {
	width: 40px;
}

.tablepress-id-3 .column-3 {
	width: 40px;
}

.tablepress-id-3 .column-4 {
	width: 60px;
}

.tablepress-id-3 .column-5 {
	width: 97px;
}

.tablepress thead th,
.tablepress tfoot th {
	background-color: #ffffff;
}
```
The other CSS tweaks are displaying properly. The page is here: http://www.northeastern.edu/learningresearch/programs/graduate-students/

Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 4 months ago

Hi,

thanks for your post, and sorry for the trouble.

Setting widths is not always, trivial, unfortunately, as the content in the cells basically dictates what column widths are possible. Usually, the browser sets quite sensible initial values.
Could you maybe explain what your intention is with changed widths here? Is there something that you don’t like about the current widths?

Regards,
Tobias

Thread Starter srknight
(@srknight)

9 years, 4 months ago

Hi Tobias,

Without setting the widths, the columns for date/time/format are way wider than they need to be, squishing the description to take up more rows.

Shannon
Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 4 months ago
Hi Shannon,

thanks, I see! Then, why don’t we simply set a column width for that column only? That way, the browser has more flexibility for the other columns.
For example, you could just use
```
.tablepress-id-3 .column-5 {
	width: 30%;
}
```
Regards,
Tobias
Thread Starter srknight
(@srknight)

9 years, 4 months ago
No, I need to set multiple columns to be narrow or else they take up way too much space. I tried setting just the date/time columns and its better, but they are still not displaying at the pixel width I am setting.
```
.tablepress-id-3 .column-2 {
	width: 65px;
}

.tablepress-id-3 .column-3 {
	width: 65px;
}
```
http://www.northeastern.edu/learningresearch/programs/graduate-students/
Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 4 months ago

Hi,

that seems to have worked, at least when I check your link. 65px might be a bit small though.

Regards,
Tobias

Thread Starter srknight
(@srknight)

9 years, 4 months ago

No, it is still not displaying properly.

The table column widths should mimic this: (just with format instead of theme) http://www.northeastern.edu/learningresearch/programs/workshops/

Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 4 months ago

Hi,

instead of setting individual pixel widths, I’d suggest to play around with percentage widths (i.e. width: 30%;) for each column. Just make sure that the sum is 100%. The problem with pixel widths is that the browser will usually not really obey them if the sum is not the same as the width of the table.

Regards,
Tobias

Thread Starter srknight
(@srknight)

9 years, 4 months ago

Okay thanks!

Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 4 months ago

Hi,

sure, no problem! I hope that you can find a good solution!

Regards,
Tobias

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Custom CSS column widths not working properly’ is closed to new replies.