How come my TABLE element is not showing padding when using border-spacing?

Looking to add some padding above and below my TABLE element, I came across the border-spacing property. Here's my table:

<table id="ranks">
    <tbody><tr class="ranksHeaderRow">
        <th></th>
        <th>Name</th>
        <th>Score</th>
        <th>Votes Cast</th>
    </tr>
    <tr class="ranksDataRow even" data-id="25">
        <td>1</td> 
        <td><a class="rankPersonLink" href="/votes/25">NameN</a></td>
        <td>12.0</td>
        <td>1</td>
    </tr>
    ...
</table>

Here's the CSS style I applied:

#ranks {
        margin: 0 auto;
        width: 60%;
        border-collapse: collapse;
        border-spacing: 20px 20px 20px 20px;
}

Despite this, there seems to be no padding around the TABLE - see https://jsfiddle.net/00tjhxaw/. How can I get the desired padding without altering the surrounding DIV?

Furthermore, I prefer the absence of spacing between cells and want to maintain that.

htmlcsshtml-tableborder

Answer №1

border-collapse will ensure that padding is not applied to your table element. Instead of using border-collapse, consider using border-spacing: 0;.

If you are wrapping your table in a DIV with a background color to create a colorful band across the page, there are various ways to add space before and after the table.

1. Apply padding directly on the table.

div {
  background-color: orange;
}

table {
  margin: 0 auto;
  padding: 3rem 0;
  border-spacing: 0;
}
<div>
  <table>
    <tr>
      <th>Alpha</th>
      <th>Bravo</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
</div>

2. Use margin on the table.

Make sure to include a clearfix to prevent the margin from breaking out of the wrapper DIV.

div {
  background-color: orange;
  overflow: hidden; /* clearfix */
}

table {
  margin: 3rem auto;
  border-spacing: 0;
}
<div>
  <table>
    <tr>
      <th>Alpha</th>
      <th>Bravo</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
</div>

3. Add padding to the wrapper DIV.

div {
  padding: 3rem 0;
  background-color: orange;
}

table {
  margin: 0 auto;
  border-spacing: 0;
}
<div>
  <table>
    <tr>
      <th>Alpha</th>
      <th>Bravo</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

ways to undo modifications made to a value within an input field using jquery or javascript

$(document).ready(function () { //Highlight row when selected. $(function () { $('#Cases tr').click(function () { $('#Cases tr').removeClass('selectedRow'); $(this).addClass(&apos ...

javascriptjqueryhtml

Vanish Dropdown upon clicking Using JavaScript

Hey, I'm new to web development and I'm currently working on creating a web app for iPhone. Everything is going smoothly except for one issue - my dropdown menu works perfectly on desktop Chrome, but on the iPhone's Safari browser, I can&ap ...

javascriptjqueryhtmlcss

The height of the input element is greater than the size of the font

I am facing an issue with an input element that has a height 2px higher than what I expected. Here is the relevant CSS: .input { font-size: 16px; padding: 15px; border: 1px solid black; border-radius: 3px; width: 400px; } <input class=" ...

htmlcss

What is the best way to save an integer in HTML's localStorage instead of a string?

I've encountered an issue while using the localStorage feature in a game I'm developing. Specifically, the money variable should be increasing by 1 every second. Here's a snippet of my code: var money = 0; window.onload = function () { ...

javascripthtmllocal-storage

Browsing HTML Documents with the Click of a Button

After collecting JSON data from a SharePoint list, I am currently in the process of creating an HTML Document. At this point, I have completed approximately 80% of the expected outcome. Due to Cross-Origin Resource Sharing (CORS) restrictions, I have hard ...

javascripthtmljquerycssjson

AngularJS Splice Function Used to Remove Selected Items from List

I previously inquired about a method to remove items from the Grid and received a solution involving the Filter method. However, I am specifically looking for a way to remove items using the Splice Function instead. You can find my original question here: ...

javascripthtmlangularjsangularjs-ng-repeat

Is Angular File API Support Compatible with HTML5?

When checking for HTML5 File API browser support in my code: private hasHtml5FileApiSupport; constructor(@Optional() @Inject(DOCUMENT) document: Document) { const w = document.defaultView; this.hasHtml5FileApiSupport = w.File && w.FileReader & ...

javascriptangularhtmltypescripthtml5-filesystem

Location of chat icon in Dialogflow messenger

After successfully embedding the Dialogflow messenger in my website, I noticed that in mobile view, the chat icon is blocking the bottom navigation bar. You can refer to the screenshot here. Is there a way to reposition the chat icon higher on the page? I ...

javascripthtmlcssdialogflow-es

How can I create a menu navigation in Bootstrap 4 similar to the one on the components website

Greetings! I am not a native English speaker, so please excuse any typos in my message. I am attempting to create a menu that functions exactly like the one on the Bootstrap components page, but with the distinction of appearing on the RIGHT SIDE: http:// ...

htmlcsstwitter-bootstrapbootstrap-4navbar

Angular background image not displayed

After searching extensively, I came across many examples that didn't work for me. I'm not sure what I'm doing wrong and I need assistance! I noticed that I can see the image if I use the <img> tag, but not when I try to set it as a ba ...

cssangulartypescriptsanitize

Dealing with customized protocol responses in JavaScript

My web server is set up to return a response like: HTTP/1.1 302 Found message://ActualMessage While this setup works seamlessly for UI clients like Android and iOS, I'm faced with the challenge of handling this case on a web browser. For instance, ...

javascripthtml

Solving the issue of unnecessary white space when printing from Chrome

Whenever I print from Chrome, there seems to be extra space between lines in the middle of a paragraph! Here is an image showing the difference between print emulation and print preview This excess space is always in the same position on various pages an ...

htmlcssgoogle-chromeprinting

Chrome isn't displaying the text color of the link

I'm having an issue with a link that is styled like a button. It looks fine in Internet Explorer and Firefox, but not on Chrome. For example: The problem lies with the teal button in the center of the page that reads "follow issue." I intended for ...

htmlcss

The nth-child selector is not functioning correctly with material-ui components

Trying to figure out how to give two paragraphs different background colors using nth-child. Here's the JSX: <div className={classes.paragraphs}> <p>Test 1</p> <p>Test 2</p> </div> And the CSS: const useSty ...

cssmaterial-ui

CSS Tricks: Placing a Panel Just Off the Page Edge

Having difficulty adjusting a panel slightly off the page like this: click here for image Attempted using width: 120% While it does work, resizing causes the image to move from its original position. I want it to remain consistent on different screens. ...

htmlcssbootstrap-4bootstrap-grid

Setting the parent's height to match one of its children

I'm struggling to align the height of the pink '#images-wrap' with the main image. When there are too many small rollover images on the right, it causes the pink div to extend beyond the main image's height. If I could make them match i ...

javascripthtmlcss

Issue with JavaScript variables (I presume) - there seems to be a conflict when one variable is used alongside another

I am attempting to conduct a test that requires displaying the number of attempts (each time the button is pressed) alongside the percentage of successful attempts, updating each time the button is clicked. However, I've encountered an issue where onl ...

javascripthtml

"Automatically scroll back to the top of the page once new content

Is there a way to automatically scroll the page to the top after content has been loaded via Ajax? Here is the code I am using to display the content: $(document).ready(function () { var my_layout = $('#container').layout(); $("a.item_l ...

phpjqueryhtmlajax

Background image not displaying

My web page has a background image set using this CSS: body, html { background-image: url(Content/Images/bg-lounge-2-l.jpg); background-repeat: repeat; background-attachment: fixed; /*background-position: 0 -390px;*/ } ...

css

Is it possible to incorporate Microdata from HTML5 into an XHTML Strict website while remaining compliant?

I have a website coded in XHTML 1.0 Strict and I am looking to incorporate Microdata for breadcrumbs so that Google can better understand them. Currently, my non-microdata marked-up breadcrumbs are structured like this: <ul> <li><a href= ...

validationhtmlbreadcrumbsxhtml-1.0-strictmicrodata