Problems with borders on widget (with table)

  • Chigolo

    (@fitnsexy)


    4 years, 10 months ago

    Hello,

    I have a little problem with the display of a table in a widget. I would like to have three pictures next to each other and use a table for this. I use Generate Press as a template. I inserted the images via HTML as follows.

    <table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 33.3333%;"><a href="xxx" target="_blank" rel="noopener"><img class="alignnone wp-image-786077" src="xxx" alt="Fitness für Vielbeschäftigte" width="160" height="120" /></a></td>
<td style="width: 33.3333%;"><img class="alignnone wp-image-786076 size-full" src="xxx" alt="Auszeichnung Fitnessblogs" width="140" height="120" /></td>
<td style="width: 33.3333%;"><a href="xxx/" target="_blank" rel="noopener"><img class="alignnone wp-image-786075" src="xxx" alt="Ehrliches Online Marketing" width="117" height="100" /></a></td>
</tr>
</tbody>
</table>

    The result is this:https://gyazo.com/c713f07e0031df6f80acb61942d7edbe

    I don’t want to have any borders.

    Any ideas?

Viewing 8 replies - 1 through 8 (of 8 total)
  • RossMitchell

    (@rossmitchell)

    4 years, 10 months ago

    Firstly it is considered very 1990s to use tables to manage layout. Putting each image in its own block and styling the blocks to float etc is how it “should” be done.
    Secondly it would be more helpful if you were to post a link to your website rather than an image of it.

    BUT you have the tables method nearly working, so this is what I would do:
    – Add a distinct class to the table
    – Add CSS to the customizer to style the borders of the required elements (probably td), I could be more helpful here if you had provided a link.

    Thread Starter Chigolo

    (@fitnsexy)

    4 years, 10 months ago

    The problem is, quite simply, that it is very difficult to insert images next to each other in widgets. Do you have a different solution here than with a table? So far, I’ve had the best experiences with a table, especially on mobile devices.

    The site is currently in maintenance mode, which is why it is not freely visible.

    How exactly do you know that? What should I insert where?

    Another solution (instead of a table) would of course be possible.

    RossMitchell

    (@rossmitchell)

    4 years, 10 months ago

    Something like this:

    <div class="imgflow"><a href="xxx" target="_blank" rel="noopener"><img class="alignnone wp-image-786077" src="xxx" alt="Fitness für Vielbeschäftigte" width="160" height="120" /></a></div>
<div class="imgflow"><img class="alignnone wp-image-786076 size-full" src="xxx" alt="Auszeichnung Fitnessblogs" width="140" height="120" /></div>
<div class="imgflow"><a href="xxx/" target="_blank" rel="noopener"><img class="alignnone wp-image-786075" src="xxx" alt="Ehrliches Online Marketing" width="117" height="100" /></a></div>

    With CSS like:

    .imgflow {
 display: block;
 float: left;
}

    You would also have the option to style differently on phones and tablets if you want using media queries in the css.

    But as I said, by all means keep using tables as you are nearly there already, something like:

    <table class="noborders">
(no changes in HTML)

    With css:

    .noborders {
 border-collapse: collapse;
 width: 100%;
}
.noborders td {
 border-width: 0;
}
    Thread Starter Chigolo

    (@fitnsexy)

    4 years, 10 months ago

    Now you were faster than me …

    I have now been able to solve it with the following code. I simply entered this in the Simple CSS plugin:

    /* TABLE BORDER */
table, td, th {
    border: 1px solid rgba(0,0,0,0);
}
    RossMitchell

    (@rossmitchell)

    4 years, 10 months ago

    This will give you solid black borders which are 1 pixel wide, on a dark background they may not be visible.
    HOWEVER this is very blunt, it will change all of the tables across your website, what I would suggest are:

    /* TABLE BORDER */
.noborders table, .noborders td, .noborders th {
    border: 0;
}
    • This reply was modified 4 years, 10 months ago by RossMitchell.
    Thread Starter Chigolo

    (@fitnsexy)

    4 years, 10 months ago

    The background of the page is white, even so I didn’t have any margins. Unfortunately, your code doesn’t work, so I get margins again … 🙁

    I’ve now changed the code to:

    /* TABLE BORDER */
table, td, th {
    border: 0px ;
}
    RossMitchell

    (@rossmitchell)

    4 years, 10 months ago

    Previously you were talking about borders, now you mention margins which are a different thing.
    If css does not work, you need to use your browser inspector to see why.

    Thread Starter Chigolo

    (@fitnsexy)

    4 years, 10 months ago

    Sorry, I meant the border of the table! But the good news: It’s working with my code above.

    Thx for you supoort and have a nice day.

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

The topic ‘Problems with borders on widget (with table)’ is closed to new replies.