Jump to content

aswiseman

Members
  • Content count

    5
  • Joined

  • Last visited

Community Reputation

0 Neutral

About aswiseman

  • Rank
    Newbie
  1. W3.CSS Layout - borders doubling up between rows

    Thanks @dsonesuk for that. Interestingly, that works perfectly in the codepen, but doesn't work in my full page full of messy code. (But that's my problem to look at!) I also found another solution using box-shadow, with fewer lines of CSS... .w3-cell-row { margin: auto; width: 78%; } .w3-cell { background-color: #fff; box-shadow: 0px 0px 0px 5px #00c; } .w3-cell-row:before, .w3-cell-row:after { content: none; } https://jsbin.com/kemizek/edit?html,output But because it's a shadow the left-hand cell is slightly different in size from the right-hand cell, and that bothered me once I'd spotted it. (The % width also means it doesn't track the size of the table either.)
  2. W3.CSS Layout - borders doubling up between rows

    If I add negative margins to the .w3-cell and .w3-cell-row, this seems to fix the doubling of borders for when the table is collapsed into a single column and when it is displayed with multiple columns... https://jsbin.com/modimuj/edit?html,output It's a bit of a bodge job, so if anyone has a neat / clean / better / more compatible / less sucky way of doing this, I'd still be interested to know :-)
  3. I've tried to put together a grid with a same width border all round. I thought I'd cracked it with border-collapse, but it still doubles up the border between rows. There's a code snippet here of a horrible nested table and underneath my W3CSS version of that table that's nearly the same, save for the doubled up row. https://jsbin.com/dugozav/edit?html,output It would be great if W3CSS had some easy way of dealing with gutters and borders (or even some documentation on w3schools). But any tips on reproducing the table layout in W3CSS without the borders doubling up between rows would be gratefully received :-)
  4. W3.CSS Layout - gutters work in v3, but broken in v4?

    Ah! Thank you for this! Is this a feature or a bug, would you say? :-) I've now added this into the <style> section of the <head> of my HTML document to override the behaviour and it seems to work... .w3-cell-row:before, .w3-cell-row:after { content: none; } Thanks again for the help - this has been driving me crazy!
  5. I've been using w3-layout in w3css v3 to get a table-like layout with equal-height rows. I want my design to include spacing or gutters between the rows and columns. This isn't shown in the example pages on W3Schools, but I've managed to get them working... Here's a cut-down example on jsbin showing w3css v3 with w3-layout-container / w3-layout-col, a centred table with 95% width and border-spacing specified (with apologies for the pink!): https://jsbin.com/vujecuy/2/edit?html,output When I try to implement this in w3css v4, I come unstuck. This time the 95% width specified gives a much slimmer width on screen, and if you use a narrow-screen to force single-column mode, it's clear the left and right margins are different sizes. Also when you jump from multi-column to single-column mode, the space between rows gets bigger, whereas with v3 it stays the same size. Here's my v4 example: https://jsbin.com/venevim/2/edit?html,output Have I missed something in my conversion from v3 to v4 or have I got something fundamentally wrong? Or is there a bug in v4? Anyone else using Layouts with gutters?
×