Remove table borders
-
Hello
I’d like to change the table properties (remove the border and change the font name/size) but only related to a static page, not for the whole theme. I am using twenty fourteen and what I want to do is to extend the 6 featured posts on the home page to 12. Since the theme allows me only 6, I figured that adding another static page below and recreating something similar to 6 “featured” using only links may work.
Can someone help me with that please?Thanks
The blog I need help with is: (visible only to logged in users)
-
On responsive with themes such as Twenty Fourteen, if you narrow down your browser window, you will see that the existing grid of featured posts goes from 3 columns, down to 2 and then down to 1. Since an HTML table has fixed rows with fixed numbers of columns, what will happen to the images in those is that they will remain with three columns and the images will just keep getting smaller and smaller, so with a table, you can’t reproduce what the theme does.
You can use one of the online table generators to generate the basic table structure. This one is one that I have used and seems to work well. To have the table resize for different window/screen widths, make sure and set the widths in percentages. In addition, you will have to add some inline CSS to the image code so that the width is set to auto so the images will resize. Here would be an example of what you would add between img and src in the HTML for the linked images:
style="width: auto; -
Hello, Thanks. I appreciate your concerns, however can you please help me figuring out how to make the table I have invisible and change fonts. Thanks in adavnace
-
The following CSS targets this particular page, and this particular page only to remove the borders from your tables.
#post-12 table { border: none; }To change the font size and font family, add the following. Again, this targets only this page.
#post-12 td a { font-size: 120%; font-family: Arial, Helvetica, Verdana, sans-serif; }I’ve set a font stack, which consists of several fonts so that you have more control over how things look. The browser will try and use the first font, if it exists on the user’s computer, and then the second and so on and if all fails, it will use the browser’s own sans-serif font.
You can see here for a listing of cross platform fonts stacks that should be available on nearly all computers.
-
-
Hello. I worked now on the rest, generated the table by the html tool you provided, set the width in percentages. It works somewhat (you can see it). I am now trying to get it work for other devices (auto resize).
Can you be more specific on what css code should look like? I tried img {width:auto;} but that renders picture too big and messes the whole layout.
Thanks!
-
Hi there, and sorry this seems to have gotten lost in the shuffle. For each “TD” element in your table, you need to set a style with a width in a percentage. For the left and right, set them to 33% and for the middle, set it to 34% so they add up to 100% like this (from within the text tab in the editor):
Left and right:
<td style="width: 33%;>
Middle:
<td style="width: 34%;>
Do the above for both rows.Next, we need to edit the image code, which currently has static width and height settings and also has a bit of extra code at the end of the image URL.
For each image, find the part of the code that starts with
<img...
Find the width and height in those, and replace the width and height with this:
`style=”width: 100%; height: auto;”
At the end of the URL in the <img> tag, you will find something that looks like this:
?w=345&h=235
Remove that from each image URL in your table.Let us know how that goes.
One suggestion would be to copy out the entire table code before you make any modifications and save it in a plain text file for safe keeping in case something goes wrong in the editing. We can then return to the original and start again if we need to.
- The topic ‘Remove table borders’ is closed to new replies.
WordPress.com Forums 