Closing the space between vertical edges of table data cells

I'm currently in the process of translating my resume from MS Word to HTML and CSS for easier maintenance and sharing purposes. I really like the layout and style of my resume and want to maintain it. The design features a left column with bold titles such as "Education" and "Experience", right-aligned against a vertical separator.

In Word, this layout is achieved using a table where the central border is set to solid while the other borders are blank. This setup ensures that section titles align vertically with their corresponding content.

However, when I tried to replicate this technique using columns in Firefox and Chrome, there were visible gaps at the vertical divisions within the table which detracted from the overall effect.

I considered using two divs - one for the headings and one for the content. Unfortunately, without specifying fixed pixel heights (which brings its own issues), I couldn't find a way to keep them perfectly aligned vertically.

Is there a solution that would allow me to maintain the alignment between the titles and content without compromising on the aesthetic?

The current table code snippet looks something like this:

<table>
        <tr><td style="border-right:1px solid black;">Education</td><td> [Name of School, etc.]</td></tr>
        <tr><td style="border-right:1px solid black;">Experience</td><td>[Work experience]</td></tr>
        .
        .
        .
    </table>

Answer №1

In my opinion, the best choice is:

table { border-collapse: collapse; }

This code snippet will get rid of any spaces between table cells and enable borders for the table.

Answer №2

Implement border-spacing: 0; on the table to eliminate any gaps between borders of the individual TD elements.

Answer №3

Eliminating the need for a table seems like the more efficient option. Converting the headings to <h2> elements (or any appropriate level of <h>) and floating them left while providing ample left margin for the text is a great alternative.

Consider using something similar to this jsfiddle, unless that's not quite what you're looking for?

Answer №4

Instead of making your life more complex, consider the simple solution of converting a word file into a PDF and hosting it using HTML embed or object tags!

edit: http://jsfiddle.net/uday99/WzGeX/2/

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

Divide the space evenly with minimal gaps

I've been trying to use examples from the web, but I just can't seem to get it right. Who better to ask than you guys? I want to evenly distribute id="klip". I have set their widths to 18% so that each space is 2%. Here's how it looks now: ...

implementing a time picker feature with jQuery

As I am not familiar with jQuery, I came across this script while searching for a time picker. If anyone could guide me on how to incorporate this code into my HTML page to enable the time picker functionality, I would greatly appreciate it. /* jQuery t ...

Having difficulty in displaying database values in HTML modal using PHP

On my PHP page, I have a setup that displays data based on the fetched id from the URL. Everything is working smoothly, but when I click a button to show a modal with additional information, the modal appears blank. Here is the code snippet I am using: ...

Delaying Jquery on scroll Event

Hey there, I've got a set of icons that I'd like to reveal one by one as you scroll down. I've incorporated some animations from , but now I'm wondering how I can implement a delay function in my jQuery so the icons appear sequentially ...

The list style of Bootstrap Select Drop Down isn't vertical

Has anyone encountered an issue with bootstrap-select where the options in a drop down box are not vertically listed? <script src="{% static 'risk_parity/js/jquery-3.2.1.min.js' %}"></script> <script src="{% static 'r ...

Make sure to enable contentEditable so that a <br> tag is inserted

When using a contentEditable, it automatically wraps words to create a new line once the width of the editable area is reached. While this feature is useful, I am facing an issue when parsing the content afterwards as I need it to insert a <br> tag ...

Clicking to remove dotted borders

One common CSS solution to eliminate the dotted borders that appear when hyperlinks are clicked is as follows: a:active, a:focus, input { outline: 0; outline-style:none; outline-width:0; } Although this method effectively removes the unwanted ...

Difficulty implementing clickable dropdown buttons in a React navbar

After some tweaking, I was able to create buttons that trigger dropdown menus which disappear when clicked off. However, a problem arises when any button is clicked - all of the dropdowns appear at once. It appears that setting the state for one button a ...

Include an additional section in the stunning Radar Chart

I am trying to use the amCharts 4 library to create a Radar graph similar to this example: In the example, there are two categories being compared with bullets surrounding each one, right? The code I currently have is as follows: am4core.ready(funct ...

What is causing the discrepancy in height between my parent DIV and its children?

I've been grappling with this issue for quite some time now and unfortunately, I haven't been able to come up with a solution. Within my design, I have a frame that consists of a top box, a left box, a right box, and a middle box that contains th ...

The function of the Django 2 model is not being identified within the index.html file

Hello everyone, I'm a newcomer to the world of Django so please go easy on me! I am currently working on creating a blog in Django and I've encountered an issue. I need to map the posts from the home page to the post page. To achieve this, I have ...

Creating interactive <td> elements in HTML with JavaScript editor capabilities

Currently, I am working on creating an editable table feature and managed to find a good example to follow. However, I have encountered some issues along the way. <td contenteditable="true" class="hover" onBlur="saveToDatabase(this,'question' ...

What is the best way to apply a class to the grandparent div of an element in AngularJS?

Currently, I have a dynamically generated list of tests: <script id="TestsTemplate" type="text/ng-template"> <article class="tests-main"> <section class="tests"> <div class="test" ng-repeat="test in ...

Hiding content in HTML with the Display:none property

After exploring various posts on this topic, I am still unable to find a solution that fits my specific scenario. Despite the challenges, I thought it would be worth asking for recommendations. Currently, I have a PowerShell script generating a report in ...

``Text Aligns Perfectly in the Middle Horizontally, yet Shifts Slightly Off-C

Two rectangular divs were created, each measuring 60px wide and 150px tall with text inside. The goal was to align the text vertically within the rectangles, achieved by using transform: rotate(-90deg). The challenge arose when trying to center the vertic ...

Using pre-existing CSS state background colors in GTK3

I am currently in the process of adapting a PyGTK2 application. This particular application performs tasks such as: self.normal_color = editor.style.base [Gtk.STATE_NORMAL] self.insensitive_color = editor.style.base [Gtk.STATE_INSENSITIVE ...

The new data is not being fetched before *ngFor is updating

In the process of developing a "Meeting List" feature that allows users to create new meetings and join existing ones. My technology stack includes: FrontEnd: Angular API: Firebase Cloud Functions DB: Firebase realtime DB To display the list of meeting ...

"PHP Dilemma: Navigating the Ajax Button Press Situation

I've been attempting to create a button that triggers a PHP script on a webpage and updates only a specific div tag, but so far I haven't had any success. Removing the $ajax section of the script allows my buttons to change states, but as soon as ...

When using JQuery, data may not be displayed in another function even when using the same command

Hello, I'm new here and encountering a strange problem with two functions in my script. Let me show you the first function: $(document).on("click", "#result2 p", function(){ var inv_id = $(this).text(); $.get("autocomplete_inv.php", ...

The cancel button for the input type "search" does not appear on Firefox, Internet Explorer, and Edge browsers

.hs-search-field__input { color: #111d33; border-bottom: 3px solid #111d33; appearance: searchfield; -moz-appearance: searchfield; -webkit-appearance: searchfield; -ms-appearance: searchfield; color: #fff; border-radius: 0px ...