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

Maximizing Efficiency: Utilizing a Single Panel across Multiple HTML Files with jQueryMobile

Can a panel defined in index.html be used on another page, such as results.html? Or do I have to define the panel on every page and duplicate the HTML code on each page? Because I want the panel to be consistent across all pages. This is the panel in my ...

javascriptjqueryhtmlcssjquery-mobile

Eliminate the white background from the modal image

I'm facing an issue with an image displayed in a modal. The image has a white background that I want to remove so only the image itself is visible. https://i.stack.imgur.com/CG9Ne.png Here's the code snippet: <div id="myModal" class ...

htmljquerycssbootstrap-modal

Invoke a function within an HTML element inserted using the html() method

Looking for help with a JavaScript function: function toggle_concessions(concessions) { var text = "<table>"+ "<tr><td class='concession-name'>gfhgfbfghfd</td><td class='op-encours&a ...

javascripthtmlfunctionappend

ASP.NET MVC does not automatically refresh when changes are made to the CSS file

Currently, I am diving into the world of Bootstrap 4 within an ASP.NET MVC project, exclusively making changes to the index.cshtml file in JetBrains Rider. However, I've encountered a strange issue that has me stumped. Each day, when I begin writing ...

css.netasp.net-mvcbootstrap-4rider

Adding spacing breakpoints in Material-UI 5 sx properties

Currently in the process of updating my components to utilize the latest MUI version. I have been converting old classes into the sx props and I find this new styling method to be more readable in my opinion. However, one thing that concerns me is handl ...

cssreactjsmaterial-ui

Using Polymer in Chrome Extension content script

Currently, I am experimenting with incorporating Polymer into a chrome extension. My main objective is to take advantage of styling encapsulation in order for my content scripts to operate independently from the CSS on the visited webpage. To begin, I hav ...

javascripthtmlgoogle-chrome-extensionpolymer

transforming a text input into unadorned plain text

Currently, I am in the process of creating a small HTML form that consists of a single textbox input. Once the user enters text into this textbox and clicks on a button located at the end of the page, I would like the textbox to transform into normal plain ...

javascriptjqueryhtml

Featuring my Cookie page prominently on my website's homepage

I am facing a simple issue: I have a cookie verification page (cookies_check.php) that I want to include on my home page (accueil.php). So, currently, the only code on accueil.php is: <?php include ('Controleur/cookies_check.php'); ?> He ...

phpcookiesincludehtml

Is there a way to adjust my input value to correspond to December of 2022?

I am working on a project where I need to set a default month and year that the user cannot modify. They should only be able to change the date in December months. Any tips on how I can achieve this? <input id="input_date" type="date&qu ...

htmlcss

Inserting line breaks in the data retrieved through AJAX

Utilizing ajax to transfer data from a sophisticated custom field wysiwyg editor. Within the markup provided, I am specifically addressing the div with the 'bio' class. However, upon receiving the data, it is consolidated into one large paragraph ...

javascriptphphtmljqueryajax

Don't forget to preserve the hover state of divs even after refreshing

I recently added a navigation bar that expands in width upon hovering over it. For an illustration, check out this example: http://jsfiddle.net/Gsj27/822/ However, I encountered an issue when clicking on a button within the hover effect area. After load ...

javascripthtmlcss

The tab content refuses to show up in its designated fixed location

I've been working on creating a responsive tab system that functions as an accordion on smaller mobile devices, inspired by this example. I've made great progress and I'm almost where I want to be, but for some reason, the active tab content ...

htmlcsstabsaccordion

Is there a way to transition an element from a fixed layout position to an absolute layout position through animation?

I am looking to create a dynamic animation effect for a button within a form. The goal is for the button to move to the center of the form, while simultaneously undergoing a horizontal flip using a scale transform. During the midpoint of this animation, I ...

javascriptjqueryhtmlcss

Centralizing images in a Facebook gallery/lightbox during the loading process

Is the image width and height stored in Facebook's gallery database? In typical JavaScript usage, the image width and height cannot be determined until the image is fully loaded. However, on Facebook, images are pre-loaded before being displayed, ens ...

javascriptcssfacebook

Could images be positioned in this manner without using the float property?

Looking to arrange images in a left-to-right flow while keeping them centered on the screen: https://i.stack.imgur.com/WHBv9.png However, I'm struggling to achieve this as the last image always ends up centered horizontally as shown below: https://i ...

htmlcsscss-floatcss-position

Use Javascript or Jquery to dynamically change the background color of cells in HTML tables based on their numerical

I am working with a collection of HTML tables that contain numbers presented in a specific style: <table border="1"> <tr> <th>Day</th> <th>Time</th> <th>A</th> <th>B</th> &l ...

javascriptjquerycsshtml-table

Error: Identical div IDs detected

<div id="tagTree1" class="span-6 border" style='width:280px;height:400px;overflow:auto;float:left;margin:10px; '> <a class="tabheader" style="font-size:large">Data Type</a><br /> <div class="pane">Refine sea ...

javascripthtmlcss

The table's content extends beyond the confines of the page

I have an HTML page where I am embedding an SSRS report. The report extends beyond the page as shown in the image below: This is the table that is generated: <table cellpadding="0" cellspacing="0" id="ctl00_MainContent_FiveYearReportViewer_fixedTable" ...

javascripthtmlcss

Need help inserting an image into the div when the ngif condition is true, and when the ngif condition is false

Essentially, I have a situation where I am using an *ngIf condition on a div that also contains an image. This is for a login page where I need to display different versions based on the type of user. However, I'm facing an issue where the image does ...

javascripthtmlangularangular-ng-if

Comparison of Timeouts in HTML Forms: POST vs GET

I created a basic HTML form with a text box and a submit button that redirects to the same page and displays the input text. It came to my attention that when I use the POST method to send the input text data, it only functions properly if the page has be ...

phphtmlformspostget