What is the best way to increase the space between table columns in CSS?

I'm struggling to increase the space between the columns in a simple table with two columns. The column-gap property doesn't seem to be working for me. Any suggestions on how I can achieve this?

JSFiddle

      #t td {
        -webkit-column-gap: 40px;
        -moz-column-gap: 40px;
        column-gap: 40px;
      }
      #t tr:hover {
        background-color: #00FF00;
      }
      #t tr:first-child {
        font-weight: bold;
      }
<table id="t">
  <tr>
    <td>Column1</td>
    <td>Column2</td>
  </tr>
  <tr>
    <td>1000</td>
    <td>2000</td>
  </tr>
</table>

htmlcsscss-tables

Answer №1

Utilize the border-spacing property and apply CSS styling to the table. See below for a functional example:

Check out the demo: jsfiddle

#t td {
  -webkit-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;
}
#t tr:hover {
  background-color: #00FF00;
}
#t tr:first-child {
  font-weight: bold;
}
table {
  border-collapse: separate;
  border-spacing: 50px 0;
}
<table id="t">
  <tr>
    <td>Column1</td>
    <td>Column2</td>
  </tr>
  <tr>
    <td>1000</td>
    <td>2000</td>
  </tr>
</table>

For more guidance, refer to this helpful post: here.

Answer №2

If you're looking to adjust the spacing in a table, border-spacing can be utilized. However, one common issue is that it may result in extra space on the left and right of the table when vertical border spacing is set.

A more effective solution would be to manipulate the border size instead.

For instance, you could apply border-left: 100px solid #FFF; and then use border:0px for the first column.

tr:hover {
   background-color: #00FF00;
 }
 tr:first-child {
   font-weight: bold;
 }

td,th{
  border-left: 100px solid #FFF;
}

 tr>td:first-child {
   border:0px;
 }
<table id="t">
  <tr>
    <td>Column1</td>
    <td>Column2</td>
  </tr>
  <tr>
    <td>1000</td>
    <td>2000</td>
  </tr>
</table>

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

Can you explain the concept of ".el" as it relates to JavaScript, HTML, and jQuery?

After conducting a search on Google, I didn't find much information. Perhaps I am using the wrong terms. I am trying to figure out what the "el" in "$.el" represents in the following code snippet: $.el.table( $.el.tr( $.el.th('first name ...

javascriptjqueryhtml

What are some common reasons why CSS and Bootstrap code can unexpectedly break?

I have been working on two tabs (tab-one, tab-two) where one is visible and the other is hidden. However, there has been an issue where the code breaks between the bottom of tab-one and the top of tab-two, causing some portion of tab-two to be occasionally ...

jqueryhtmlcssbootstrap-4

Div with sidebar that sticks

I am currently working on setting up a website with a sticky sidebar. If you would like to see the page, click this link: On a specific subpage of the site, I am attempting to make an image Validator sticky, but unfortunately, it's not functioning a ...

javascriptjqueryhtmlcss

Finding results in AngularJS by typing at least 4 characters into the input field

I am using a MySQL database to search with AngularJS. How can I set it up so that the search only triggers when at least 4 characters are inputted? Here is the HTML code: <div class="search"> <form action="" method="post" class="searchform" &g ...

javascripthtmlmysqlangularjs

Choose the "toolbar-title" located within the shadow root of ion-title using CSS

Within Ionic, the ion-title component contains its content wrapped in an additional div inside the shadow-dom. This particular div is designated with the class .toolbar-title. How can I target this div using a SCSS selector to modify its overflow behavior? ...

cssangularionic-frameworksassshadow-dom

Capturing HTML elements based on their class names using regular expressions

In my Python script, I am attempting to extract both the element and class names for all elements within an HTML file. So far, I have successfully retrieved all class names using the code snippet below. This method is crucial as I will be processing numero ...

pythonhtmlregex

Maintaining an element's vertical position in relation to the screen with jQuery

I'm very close to achieving what I want, but my goal is a bit unconventional. My setup includes several panels divided into 2 columns, with each panel capable of triggering an expand/compress toggle. My challenge is maintaining the vertical position ...

jquerycss

What is the best way to create an animation where every letter in a word transitions to a different

Is there a way to animate a word so that each letter changes color within a range of 7 colors, with all letters displaying different colors simultaneously in an infinite loop? <div class="box"> <h1 class="logo animate__animated an ...

javascripthtmljquerycss

Update the CAPTCHA, while also refreshing the entire registration form

JavaScript Snippet <script language="javascript" type="text/javascript"> function updateCaptcha() { $("#captchaimage").attr('src','new_captcha_image.php'); } </script> New Image Code <img src="new_ ...

javascriptphphtmlcss

Stacking two divs for the team section layout

Although I'm new to this, I've been struggling to achieve a specific layout for a team page. My goal is to display a picture on the left side and text on the right for each team member. The design includes the person's name, title, and a set ...

htmlcss

Struggling with identifying errors in the Javascript code for my assignment

My code is giving me trouble and I could really use some assistance You can find my code in this GitHub folder: link. To see the project in action, visit this page on GitHub Pages: link. The task involves iterating over an array of names and printing eit ...

javascripthtmldebuggingweb

"Despite using the same CSS and HTML code, the fonts appear distinct from each

Feeling lost here, not understanding what's going on. I made changes in Elementor on my first PC and later noticed that the font looked a bit different. I tried to revert the changes but had no luck. I also work on my second PC where the browser showe ...

htmlcssfonts

Fully compatible with Internet Explorer 6, with a height of

Is there a way to create a div that is always 100% the height of the browser, even if it's empty, and works in IE6? Any suggestions or hacks using CSS? ...

cssinternet-explorer-6

The use of HTML5 required attribute is ineffective when submitting forms via AJAX

Seeking advice on implementing basic validation for a newsletter form that only requires an email address. The current page layout doesn't allow space for jQuery error messages, so I attempted to use the HTML 5 required attribute. However, the form st ...

javascriptjqueryajaxhtmlforms

Are HTML entities ineffective in innerHTML in javascript?

Take this example: <script type="text/javascript> function showText() { var text = document.getElementById("text-input").value; document.getElementById("display").innerHTML = text; } </script> <?php $text = "<html>some ...

javascripthtml

"Enhance Your Form with Ajax Submission using NicEdit

Currently, I am utilizing nicEditor for a project and aiming to submit the content using jQuery from the plugin. Below is the code snippet: <script type="text/javascript"> bkLib.onDomLoaded(function() { new nicEditor().panelInstance('txt1' ...

javascriptjqueryhtmlajaxnicedit

Is it possible to utilize onclick for various table cells in jQuery?

I have a situation where I need to loop through dates and display table content accordingly. Could someone please assist me in figuring out how to do this? index.html.erb <% @batches.each do |batch| %> <tr> **<td class = "pie" id ...

javascriptjqueryhtmlruby-on-rails

The reason why setting height to 0 is ineffective in a CSS definition

Within my current project, I am utilizing vue.js 2 and have implemented an img component. Below is the code for this component: <template> <div class="banner"> <img class="banner-img" :src="bannerImg"/> </div> </template> ...

javascriptcssvue.jsvuejs2

Customizing the color of the thumbs on a Material UI range slider

Hey there, currently working on creating a range slider with 2 values using the material UI slider component. My goal is to customize the two thumbs with different colors. Any ideas on how I can achieve this? ...

cssreactjsmaterial-uisliderrangeslider

Is there a way to align both a list icon and its contents in the center?

Can someone please assist me? I am attempting to replicate a website, but I am unsure how to center align an icon list and content. Currently, it appears like this; https://i.stack.imgur.com/6FZCr.png I would like it to look like this; https://i.stack.im ...

htmlcss