Insert a gap between the two columns to create some breathing room

Does anyone know how to create spacing between columns in an HTML table without affecting the rows?

In my table, each column has a border around it:

<table>
<tr>
    <td style="padding:0 15px 0 15px;">hello</td>
    <td style="padding:0 15px 0 15px;">world</td>
    <td style="padding:0 15px 0 15px;">how</td>
    <td style="padding:0 15px 0 15px;">are</td>
    <td style="padding:0 15px 0 15px;">you?</td>
</tr>
<tr>
    <td style="padding:0 15px 0 15px;">hello</td>
    <td style="padding:0 15px 0 15px;">world</td>
    <td style="padding:0 15px 0 15px;">how</td>
    <td style="padding:0 15px 0 15px;">are</td>
    <td style="padding:0 15px 0 15px;">you?</td>
</tr>
</table>

Css

table td{
   border : 1px solid black;
   border-spacing: 1em 0;
 }

Check out this fiddle for more details.

htmlcsshtml-table

Answer №1

When using the cellspacing css property, it creates space between both rows and columns on a table.

It is important to note that there isn't an actual CSS property called cellspacing.

The correct property to use for creating spacing between cell borders is border-spacing. This property...

Specifies the distance that separates border of adjoining cells. If one value is given, it applies to both horizontal and vertical spacing. When two values are provided, the first one represents horizontal spacing and the second one represents vertical spacing. Negative values are not allowed.

...requires two values in the format:

border-spacing: 1em 0;

Answer №3

To achieve an inline-table display for each td and add a right margin, you can use the following CSS:

table tr td{
  border:1px solid black;
  display:inline-table;
  margin-right:10px;
}

If you want to remove the right margin from the last child element, you can do so with this code:

table tr td:last-child {
    margin-right:0;
}

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

Run Javascript code if a specific CSS class is present on an element

Whenever a user enters an incorrect value into a textbox on my page, an error message is displayed within a div with the class 'validation-errors'. I'm looking for a solution to trigger a javascript function (which adds a CSS property to a ...

javascriptjqueryhtmlcssasp.net-mvc

Resizing the window causes divs to be positioned relative to the image (almost functional)

In my coding project, I've encountered a situation where I have 3 "pins" positioned within a div called #outerdiv. This div has a background-image and the pins are supposed to remain in the same spot on the background image no matter how the window is ...

jqueryhtmlcss

Struggling to find the width of an SVG text box or add line breaks after a specific number of characters?

I am currently working on creating an SVG text box using the amazing Raphael library. The content inside this text box comes from a dynamic string that is extracted from an XML document. There are times when this string turns out to be longer than the can ...

javascripthtmlsvgraphael

Inquiries for Web-Based Applications

As I contemplate coding my very first webapp, I must admit that my skills are somewhere between beginner and intermediate in html, css, js, jquery, node, sql, and mongodb. However, the challenge lies in not knowing how to bring my vision to life. My ulti ...

javascripthtmlcssweb-applicationsvue.js

How to make an entire video clickable on Android for seamless playback?

I have implemented an HTML5 video in my mobile web application. Currently, users need to click the small play icon at the bottom left of the video to start playing it. Is there a way to make the entire video clickable so it plays when clicked anywhere on t ...

javascriptjqueryhtmlvideomobile

Tips for generating an HTML template as a string using jQuery

I have developed a dynamic modal using plain JavaScript, triggered by a button click. This modal is controlled based on the attributes `data-open-hours` and `data-closed-hours` in the HTML. If you take a look at my demo, you will notice an issue. Let me e ...

javascriptjqueryhtmlcsstwitter-bootstrap

Conceal the URL and any parameters upon successful completion of AJAX request

In my ajax js code, the solonreport.jsp file returns a URL link that connects to a local report server and generates an Excel report. However, when using this link with the window.open(json.url) function, the link and parameters are visible to the user. ...

javascriptjqueryhtmlajax

Using jQuery to define active or hover background images

I'm currently working on a list containing 5 items, with the first one active by default (thanks to jQuery adding a 'active' class). Each item has its own background image. When I click on any of the list items, another div gets updated with ...

jquerycssevents

Combining several position-aligned classes into a single div instead of each having their own individual div

http://jsfiddle.net/58arV/ Trying to create a question component where users can choose the correct answer out of 4 options. I planned to use 4 input styles with a checkmark "radio" DIV on the right. When a user clicks on an option, it should display a c ...

jqueryhtmlcsstwitter-bootstrap

Is there a way to execute a jar file using JavaScript?

Hello, I'm new to this and still learning. I have a jar file that takes one parameter and returns a JSON with the result. Could someone please advise me on how to run my jar using JavaScript? I've attempted the following code but it's not wo ...

javascripthtmljar

Modifying the appearance of select components in React MUI using CSS

Can someone help me modify the appearance of the react material UI select component to match this design: I have already applied the following CSS styling: const styles = { width:'250px', border:'1px solid gray', borderBot ...

cssreactjsmaterial-ui

Move the Div element up and down when clicked

When a tag is clicked, the corresponding div opens and closes. I would like the div to slide down and up slowly instead of appearing immediately. <a href="" class="accordion">Click here</a> <div class="panel" id="AccordionDiv"> ...

javascriptjqueryhtmlcssangularjs

Reordering sections in a dynamic manner

I'm working on a single-page website with four sections arranged like this: <section id=“4”> <section id=“3”> <section id=“2”> <section id=“1”> Now, I want to change the order of these sections when scrolling ...

javascriptjqueryhtml

Selenium allows the liberation of a webpage from suspension

I'm facing an issue with resolving the suspension of a website as shown in the image below. My goal is to access a ticket selling website every 0.1 seconds, but if it's busy, I want it to wait for 10 seconds before trying again. Visit http://bu ...

javascriptjavapythonseleniumhtml

Working with radio buttons in a loop using PHP

I am facing an issue with a loop that iterates 3 times. In the loop, there's an HTML form containing radio buttons and I am processing the input using PHP. However, when echoing the form data, it does not display the correct values. Is there something ...

phphtmlformsradio-button

How come the subitems of a second-level nested list do not appear when hovering over a hyperlink?

Show "News" in French when hovering over the French option. ul#topmenu li a#HyperLink:hover ul { background-color: pink; display: list-item; } <ul id="topmenu"> <li class="langHorzMenu"> <a href="#" id="HyperLink">French</ ...

htmlcss

Adjusting the input label to be aligned inside the input box and positioned to the right side

I am currently working on aligning my input label inside the input box and positioning it to float right. The input boxes I am using have been extended from b4. Currently, this is how it appears (see arrow for desired alignment): https://i.stack.imgur.co ...

htmlcssvue.js

Is there an improved method for toggling animations in CSS using jQuery compared to my current approach?

Looking to create a toggle effect for a dropdown box that appears and disappears when a button is clicked. var clickState = false; $("#show").on("click", function() { if (!clickState) { $(".animated").removeClass("off"); refreshElement($(".an ...

javascriptjquerycssanimation

Switching the menu in mobile view: utilizing vue and pug

Hello, I am having trouble toggling my hamburger menu. When I check the console, it shows an error message: "nav is not defined". header.pug header.site-header div.navbar div.navbar__link.navbar--brand logo div.navbar ...

jqueryhtmlvue.jspugtoggle

Run various CSS animations repeatedly

I recently created a captivating text fade-in, fade-out animation consisting of four lines. Each line elegantly appears one after the other, creating a mesmerizing effect. However, there's now a request to have these animations run in an infinite loop ...

csscss-animations