What is the best way to have text fit perfectly into a table cell?

In my asp.net table, the first column contains captions for each row of data. The length of these captions varies, with different amounts of words in each one. I am looking to align the first letters of each caption at the beginning edge of the cells (left side in left-to-right text) and the last letters at the end edge of the cells (right side in left-to-right text). The spacing should impact word spacing only, without affecting letter spacing or font size. I do not want the font to be stretched.

Ideally, I would like all the first words of the captions aligned at the beginning of the cell while only the last word aligns with the end of the cell. However, equal spreading of all words is also a possibility.

htmlcssasp.net

Answer №1

Consider the following solution:

CSS:

table {
    width: 60%;
    font-size: 16px;
}

td {
    width: 50%;
    border: 1px solid black;
    text-align: justify;
}

td::after {
    content: "";
    display: inline-block;
    width: 100%;
}

span.left {
    float: left;
}

span.right {
    float: right;
}

.NET table with text filling each cell:

<asp:Table ID="Table1" runat="server">
    <asp:TableRow>
        <asp:TableCell>Content for Cell 1</asp:TableCell>
        <asp:TableCell>Content for Cell 2</asp:TableCell>
    </asp:TableRow>
</asp:Table>

.NET table with text aligned to the left and right:

<asp:Table ID="Table1" runat="server">
    <asp:TableRow>
        <asp:TableCell>
            <span class="left">Aligned Left Text 1</span>
            <span class="right">Aligned Right Text 1</span>
        </asp:TableCell>
        <asp:TableCell>
            <span class="left">Aligned Left Text 2</span>
            <span class="right">Aligned Right Text 2</span>
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>

Answer №2

To achieve a clean and organized layout, consider using the CSS property text-align:justify

justify - This option allows content to space out on a line to fit as many blocks as possible while aligning the first word to the left edge and the last word to the right edge.

For more information on the text-align property, check out this link

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

What is the best way to spin a div HTML layer?

I'm trying to modify a Div layer that looks like this: ... <style type="text/css"> <!-- #newImg { position:absolute; left:180px; top:99px; width:704px; height:387px; z-index:1; background-image:url(../Pictures/rep ...

javascriptcsshtml

Is there a way to style alternate iframes using CSS?

I need to select every second iframe in the image provided. Is it possible to achieve this using nth-child? I have tried with the following code (unsuccessfully): #main iframe:nth-child(2n+2) ...

csscss-selectors

What are alternative methods for passing data to a template besides EJS?

app.get("/movies", function(req, res) { Movies.find({}, function (err, foundMovie){ if(err) { console.log(err); } else { res.render("movies/index", {movie_index:foundMovie}); } } }); I have written code to retrieve a movie and ...

htmlnode.jsrestembedded-javascript

Is there a way to use CSS to make a div expand as much as it can?

I am attempting to accomplish the following; Do you think this is achievable? ...

htmlcss

Can you explain the significance of this HTML code?

While examining some source code, I came across the following: <div class="classname {height: 300px; width: 200px}"></div> I am aware that element styling can be done using the style="" attribute. Could you explain what this code snippet sig ...

javascripthtmlcss

Building a stylish bootstrap button within the cell rows of a table using jquery

I need to insert a button in the "Details" column. <button class="btn btn-primary btn-fab btn-icon btn-round"> Here is my code: var tableRef = document.getElementById('ticker_table').getElementsByTagName('tbody')[0]; var ti ...

javascriptjqueryhtmlbuttonbootstrap-4

Curved edges, Layering, Content overflow restriction

My design consists of two circular divs with the border-radius property set to its max value. The first circle contains a header div with a unique background-color and overflow:hidden to create the illusion that the top portion of the circle has a differen ...

overflowz-indexcsscss-position

Toggling submenu visibility with click event in jQuery and HTML

As a newcomer to jQuery, I have successfully created a vertical menu. My objective is as follows: When the first list item is clicked, it should display the submenu. Clicking on the second list item will show the level 1 submenu while closing the first on ...

jqueryhtmldrop-down-menusubmenu

What is the best way to display an element once an input field with type "date" is populated with a value

Struggling to create a dynamic form that reveals additional fields when a date picker is used? I've searched for solutions, but everything I find involves complex validations and logic that exceed my needs. I've had some success with revealing e ...

htmljquerycssformsdate

CSS First Element

"When an element with a specific id has a first-child descendant that is any of the heading tags (h1, h2, h3, h4, h5, or h6), apply the following CSS styles:" I have come up with the following selector: #content:first-child h1, #content:first-child h2, ...

csscss-selectors

Move the image inside the box without directly following the mouse cursor, but at a slightly faster pace

I am facing an issue with a Vue component that allows me to zoom in on an image and move it around the container. The problem is, when the image is zoomed in, it moves faster than the mouse due to using the scale transform. Additionally, I noticed that cl ...

javascriptcssvue.js

How can I fix the issue with Parallax scrolling not functioning properly? (Using Next.js Image + Tailwind)

What am I missing to get parallax scrolling to work? <div className="h-screen"> <div className="relative h-full w-full bg-cover bg-fixed bg-center bg-no-repeat"> <Image src="https://images.unsplash.com/photo-1454496522488-7a8e488e86 ...

cssnext.jstailwind-cssparallax

Two tables arranged in a nested grid layout

Picture a bootstrap grid setup with an 8:4 layout. <div class="container"> <div class="row"> <div class="col-md-8"> </div> <div class="col-md-4"> </div> </div> </div> ...

htmlcssbootstrap-4grid-layout

Trouble with closing windows in the in-app browser on Android devices

Is there a method to successfully close the in-app browser? Despite window.close working on iOS devices, it is not effective on Android. I have experimented with alternatives like window.top.close and window.open("", "_self") window.close, but none have ...

javascriptandroidhtmlmobileviber

Angular 4 encounters performance issues when rendering numerous base64 images simultaneously

I'm currently working on a private project that involves using Angular 4 (specifically version 4.1.2). One issue we're facing is related to rendering multiple base64 images on an HTML page. The performance of the application significantly drops w ...

javascripthtmlimageangularbase64

Displaying the loading image only on the first result within a while loop

When a submit button is clicked on any result, the loading image below the button displays only for the first result in the while loop. For example, if I click the submit button on the first result, the loading image shows below it. However, when I click t ...

javascriptphpjqueryhtmlajax

The equal height feature in Bootstrap 4's card-deck is not functioning as expected

I am having an issue with the card-deck property where it is not being applied correctly. The .card-deck class should create a grid of cards that are equal in height and width, and the layout should adjust automatically as more cards are added. Here is th ...

htmlcssbootstrap-4

The functionality of ng-style is not compatible with min, and utilizing ng-model produces undesirable results

Why does the ng-style condition not work with min=0 if the saved value of ng-model="detail.Amount" is negative? <input type="number" min="0" oninput="validity.valid||(value='');" class="form-control" title="Amount" ng-model="detail.Amount" ng ...

htmlangularjsvalidation

Retrieve the text value from a single object by utilizing jQuery

I am struggling with customizing a product page that lists various products in a list format. My goal is to create an alert that displays only the name of the product when clicked, rather than showing both the name and price as it currently does. Can someo ...

javascriptjqueryhtml

How do I directly display a variable in index.html using node.js?

Is there a way to retrieve user inputs from the index.html file, process them in Node.js, and then display the result back on the index.html page instead of redirecting to a new page? Form Handling with Express var express = require('express'); ...

javascripthtmlnode.jsexpress