WordPress.org

1. jumpmuz
   Member
   Posted 2 years ago #

   I have been trying for the last couple of days to create a top and bottom border of each cell or row. And have found a temp solution, but not an ideal one.

   Using display:block; I get my borders although the columns float to the left creating a mess of the table. Your suggestions are much appreciated.

   .events .wp-table-reloaded {
   	font-size: 12px;
   }
   .events .wp-table-reloaded tr {
   	background: #f4f4f4;
   	display: block;
   	border-top:1px solid #ffffff;
   	border-bottom:1px solid #d0d0d0;
   }
   .events .wp-table-reloaded td {
   	background: transparent;
   	border: none!important;
   	padding: 12px 0 12px 18px;
   }

   http://wordpress.org/extend/plugins/wp-table-reloaded/

2. TobiasBg
   Member
   Posted 2 years ago #

   Hi,

   I'm not that much of an CSS expert, but if you post (or email) the link to the page in question, I'll take a look at it.

   Maybe it would also be helpful if you could create an image (edited screenshot maybe) that shows how you want it to look like.

   Regards,
   Tobias

3. jumpmuz
   Member
   Posted 2 years ago #

   Tobias, my website is still on localhost although I do have a screenshot. Below is the css I used to align the columns. Even though this works great, I have to create a new css widths for every table.

   .wp-table-reloaded-id-38 .column-1 {
   	width: 65px;
   }
   .wp-table-reloaded-id-38 .column-2 {
   	width: 225px;
   }
   .wp-table-reloaded-id-38 .column-3 {
   	width: 115px;
   }

4. TobiasBg
   Member
   Posted 2 years ago #

   Hi,

   wow that looks really weird.

   I believe that it is caused by your "display: block;" attribute. Table rows mostly need "display: table-row;" if I'm not mistaken. Are you sure that your "display: block;" is necessary?

   For the column-widths: Yes, you would have to create new CSS for every table, but only if they each have different column widths (no way around that). But if all your tables shall have the same column widths, you can use the .wp-table-reloaded selector instead of .wp-table-reloaded-id-N.

   If all this doesn't lead to a solution, I suggest setting up a test site (on a real domain, not localhost) that we could play around with.

   Regards,
   Tobias

5. jumpmuz
   Member
   Posted 2 years ago #

   Thanks Tobias, that was easy as, table-row fixed the problem.

   Thanks again for your help. Muz!

6. jumpmuz
   Member
   Posted 2 years ago #

   Nope I jumped the gun too soon, will have to try some div tables?

7. jumpmuz
   Member
   Posted 2 years ago #

   I ended up creating a background image with two thin lines.
   background: #fdfdfd url(wordpress/wp-content/themes/headlines-child/img/border.png) repeat-x;

Topic Closed

This topic has been closed to new replies.