Align the text vertically within a table-styled div

My goal is to align all text vertically.

If I eliminate float: left; then the entire table disappears?

.div-table{
  display:table;         
  width:auto;         
  background-color:#ffffff;               
  border-spacing:20px;
}
.div-table-row{
  display:table-row;
  width:auto;
  clear:both;
}
.div-table-col{
  float:left;
  display:table-column;         
  width:180px;         
  background-color:LightSteelBlue;  
  height:60px;
  text-align: center;
  box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.3) ;
  vertical-align: middle;
}
      <div class="div-table">
             <div class="div-table-row">
                <div class="div-table-col" align="center">Mortgage Lender</div>
                <div  class="div-table-col">Type</div>
                <div  class="div-table-col">Initial Period (mths)</div>
                <div  class="div-table-col">Initial Rate (%)</div>
                <div  class="div-table-col">SVR (%)</div>
                <div  class="div-table-col">Max Amount (£'s)</div>
                <div  class="div-table-col">Max LTV (%)</div>
                <div  class="div-table-col">Monthly Repayment (£'s)</div>
             </div>
            <div class="div-table-row">
                 <div class="div-table-col">Nationwide</div>
                <div class="div-table-col">Fixed</div>
                <div class="div-table-col">24</div>
                 <div class="div-table-col">1.99</div>
                <div class="div-table-col">3.99</div>
                <div class="div-table-col">1000000</div>
                <div class="div-table-col">65</div>
                <div class="div-table-col">Calc</div>
            </div>
            <div class="div-table-row">
                 <div class="div-table-col">Nationwide</div>
                <div class="div-table-col">Fixed</div>
                <div class="div-table-col">24</div>
                 <div class="div-table-col">1.99</div>
                <div class="div-table-col">3.99</div>
                <div class="div-table-col">1000000</div>
                <div class="div-table-col">65</div>
                <div class="div-table-col">Calc</div>
            </div>
            <div class="div-table-row">
                 <div class="div-table-col">Nationwide</div>
                <div class="div-table-col">Fixed</div>
                <div class="div-table-col">24</div>
                 <div class="div-table-col">1.99</div>
                <div class="div-table-col">3.99</div>
                <div class="div-table-col">1000000</div>
                <div class="div-table-col">65</div>
                <div class="div-table-col">Calc</div>
            </div>

      </div>

I chose to use div for creating the table for specific reasons, so please avoid suggesting to use a "<table> for tabular data." :)

Thank you

htmlcssvertical-alignment

Answer №1

Utilize the CSS property th (display : table-header-group;): for example

.div-table{
  display:table;
}
.div-table-row{
  display:table-row;
  width:auto;
  height:auto;
}
.thead{
  display : table-header-group;
  background:red;
}
.tbody{
  display : table-row-group;
  width:500px;
  height:500px;
  background:green;
}
.div-table-cell
{
  display:table-cell;         
  width:100px;
  height:100px;
}

view this code

Answer №2

In the event that the content is consistently displayed on one line, you have the option to include:

.div-table-col {        
    line-height: 60px;
    }

Answer №3

The elements marked with the class .div-table-col actually behave as table cells, not columns. By switching the display property to table-cell instead of table-column, you can achieve a tabular layout without having to use float:left.

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 issues could arise from utilizing PHP for generating variables within my CSS file?

One major limitation of CSS is the absence of variables. It would be beneficial to have the ability to use variables for controlling things like the location of imported CSS and color schemes within a design. An alternative solution could involve using a ...

phpcss

Trouble with submitting data to SQL database using the input form

I am currently working on a website where I need to transfer data from an HTML form to a SQL database. Here is the code for post.html: <form action="send_post.php" method="post"> <h3>ID:</h3> <input type="text" name="id"> <h3&g ...

phphtmlsqldatabase

Attempting to use jQuery on click to set the background image of a div to a base64 encoded data image

Check out what I'm working on here The first div contains html with data:image;base64 <div id="large_photo_null" style="width:50px; height:50px; background-image: url( data:image;base64,R0lGODlhR.. );" > </div> When using html, the ba ...

javascriptjquerycss

validating API keys in Django

What is the process for verifying API keys in Django? I am currently using RapidAPI and they provide a key, but how can I authorize it with the URL? views.py def thanks(request): url = "https://webknox-trivia-knowledge-facts-v1.p.rapidapi.com/trivia/r ...

pythonhtmldjangoapi

Which names can be used for HTML form tags in jQuery?

Recently, I encountered an issue related to jQuery form serialization which stemmed from naming a form tag "elements". The problem arose when using jQuery $(’form’).serialize(). Here is an example of the problematic code: <form> <input name=" ...

javascriptjqueryhtmlforms

Stop the resizing of a div that contains an image when additional text is inserted into it

My website has a div that is centered and contains a picture. The div adjusts its height to fit the picture, but when I add text, the div unexpectedly resizes so that its height is taller than the picture itself. Here is an example: Html: <div class=" ...

htmlcss

Populating options in <select> for Internet Explorer version 5

Let me address the first question here. The reason why I am using IE5 is because I am working on a Windows CE device which limits me to this browser. My application involves a webpage with various elements. In my HTML code, I have two text fields and a se ...

javascripthtml

Animating slides with CSS Keyframes and React, incorporating toggle slide fade out and slide fade (back) in

I am seeking a solution for toggling a box (div) with slide-out animation and then sliding back in animation (in reverse) upon button press. My requirement is to have no animations during the initial page render. While I can successfully slide the box to ...

javascriptcssreactjscss-animations

Instant Pay Now Option for Your WordPress Website with PayFast Integration

I have encountered an interesting challenge that I would like some guidance on. My goal is to integrate a PayFast "Pay Now" button into a Wordpress.com blog, specifically within a sidebar text widget. The tricky part is that I need the customer to input th ...

javascripthtmlwordpress

Enhancing Online Presence with Video Gallery Website Development

I'm in the process of creating a website and need help finalizing my video page. I envision a layout similar to this example: https://i.stack.imgur.com/hctui.gif The main feature should be a large video placeholder at the top, followed by several thu ...

javascriptjqueryhtmlcss

When applying the OWASP ESAPI encodeForHTMLAttribute method, I noticed that symbols are being rendered as their corresponding HTML entity numbers instead of the actual symbols

I recently started exploring OWASP ESAPI for preventing XSS and integrating the JavaScript version into my application. As per Rule #2 in the XSS prevention cheat sheet, it is recommended to "Attribute Escape" before inserting untrusted data into attribut ...

javascripthtmlencodingowaspesapi

Using a `right: 0` value will not be effective when using absolute positioning

Currently, I am in the process of developing a website utilizing Bootstrap 3.3.6. After going through a tutorial on how to create a responsive banner slider, I found this resource helpful: http://www.jqueryscript.net/slider/Full-Width-Responsive-Carousel- ...

csstwitter-bootstrap-3

Breaking Long Strings into Multiple Lines Using React Material UI Typography

Currently, I am working with ReactJS and incorporating MaterialUI components library into my project. However, I have encountered a problem with the Typography component. When I input a long text, it overflows its container without breaking onto a new lin ...

javascripthtmlcssreactjsmaterial-ui

Using jQuery and Modernizr for CSS3 and Javascript transitions support in Internet Explorer

Looking for a way to add support for button hover effects in IE 7-9 on this Codepen.io project. Can anyone help? For example, I'm trying: transition-duration: 0.5s; transition-property: all; transition-timing-function: ease; margin-top: 5px; I atte ...

jquerycsscss-transitionsmodernizr

Colorbox's functionality struggles to uphold several groups simultaneously without encountering errors

I have incorporated Colorbox on this page. On the setup, I have various groups listed as groups 1 to 9. However, when clicking on the second and third items, they display correctly according to the provided code. My aim is to make everything appear in the ...

javascriptjquerycsscolorbox

Fix a carousel layout problem

I've made changes to an HTML-PHP module to display portfolio images as a carousel, and I'm using the same module on this website too. However, I've encountered an issue with duplicate content and the previous-next navigation buttons. Can so ...

javascriptphphtmlcssjoomla

Using Jquery Chosen Plugin to Dynamically Populate One Chosen Selection Based on Another

Good evening to all, please excuse any errors in my English. I have successfully integrated a jQuery Chosen plugin with my 'estado' field (or province). My goal is to populate another jQuery Chosen plugin with the cities corresponding to that s ...

javascriptjqueryhtmlajaxjquery-chosen

Perfect CSS Menu Hover Effect

I created my own navigation menu, and I'm struggling with one thing... How do I change the A tag color to white when hovering over the ul id "navitemul"? I've tried #lovedating#navitemul:hover #lovedating a {color:white} and other methods, but no ...

csscolorshover

"Bootstrap 4 does not allow labels to be displayed inline with the input field

I'm currently working with Bootstrap 4 and Vue.js to populate an input form, but I'm struggling to get the label to appear inline and before the input type file. <div v-for="problem in problems"> <div class="row"& ...

htmlcssvue.jsbootstrap-4label

"What is the best way to prevent a button from being enabled in Angular if a list or array is not

I am incorporating data from my service in the component: ngOnInit() { this._sharedService. getReceiptItem().takeUntil(this.ngUnsubscribe). subscribe(products => this.receiptItems = products); } Is there a way to deactivate a button if there ...

javascripthtmlangularcss-selectorsangular-services