How to set width for table columns in CSS

Tables in html behaves differently than other elements on a page since the table, rows, th and td elements are displayed in a special way. The column width is automatically adjusted based on the content.

Here is a trick to set the column width using the colgroup element which affects both the th and td at once.

A table with 3 columns and 2 rows:

<table>
  <colgroup>
    <col class="col-select" />
    <col class="col-product" />
    <col class="col-country" />
  </colgroup>
  <thead>
    <tr>
      <th>Select</th>
      <th>Product</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox">Select</td>
      <td>Product 1</td>
      <td>Sweden</td>
    </tr>
    <tr>
      <td><input type="checkbox">Select</td>
      <td>Product 2</td>
      <td>Norway</td>
    </tr>
  </tbody>
</table>

We have 3 columns: Select, Product and Country
To set the widths we use css classes col-select and so on.

.col-select { 
  width: 1%; 
} 
.col-product { 
  width: 75%; 
} 
.col-country {
  width: 24%; 
}

Here we set the select to be as “narrow” as possible (1%). And the others to relative % numbers.
To further “force” the widths we should allow long words to be wrapped, e.g add the following css class for the columns you wish this behavior for:

.text-break {
  overflow-wrap: break-word;
}

Usage:

<colgroup> 
  <col class="col-select" /> 
  <col class="col-product text-break" /> 
  <col class="col-country text-break" /> 
</colgroup>

Pinegrow Web Editor | Website Builder for Professionals

Pinegrow Web Editor, website builder for professionalsPinegrow is a Mac, Windows and Linux web editor that lets you build modern websites faster with live multi-page editing, CSS & SASS styling, CSS Grid editor and support for Bootstrap, Tailwind CSS and WordPress.Pinegrow is a desktop website editor that opens and saves standard HTML and CSS files.

Source: Pinegrow Web Editor | Website Builder for Professionals

Solution for responsive images covering entire container and keeping aspect ratio

This solution is probably already out there somewhere on the interwebs, but I write it down for now.

I’ve been working with a Bootstrap 4 based website a lot lately.
Today I got the requirement to make an background image adjust to the height of its sibling column but at the same cover the entire background of its container.

I want the entire container box to be covered by the background image and still keeping its aspect ratio in various screen sizes, it’s ok with clipping and stretching (if image is to small). Here is a solution:

html:

<div class="row">
	<div class="col-6">
		<div class="teaser-container" id="teaser1">
			...column 1 html content...
		</div>
	</div>		
	<div class="col-6">
		<div class="teaser-container" id="teaser2">
			...column 2 other various height html content...
		</div>
	</div>			
</div>

css:

#teaser1
{ 
	height: 100%; 
	background-image: url('/globalassets/top-image.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

 

 

How do I wrap a selection with an HTML tag in Visual Studio? – Stack Overflow

A very usable keyboard shortcut when working with html in Visual Studio.

Visual Studio 2015 comes with a new shortcut, Shift+Alt+W wraps the current selection with a div. This shortcut leaves the text “div” selected, making it seamlessly changeable to any desired tag. This coupled with the automatic end tag replacement makes for a quick solution. UPDATE This shortcut is available in Visual Studio 2017 as well, but you must have the “ASP.NET and Web Development” workload installed. Example Shift+Alt+W > p > Enter

Source: How do I wrap a selection with an HTML tag in Visual Studio? – Stack Overflow

Chrome DevTools – Save updated js, html and css files to disk from Chrome

Set up persistent authoring in Chrome DevTools so you can both see your changes immediatedly and save those changes to disk.

Source: Set Up Persistence with DevTools Workspaces | Web Tools – Google Developers