Solved

Bold certain row/colum in <table> (Bootstrap3)

Posted on 2014-03-17
2
198 Views
Last Modified: 2014-03-19
Hi,

I want to bold the top and bottom rows and the first and last columns of a table. What is the best way to achieve this with boostrap 3?

http://jsfiddle.net/2nG8C/

<table class="table">
	<thead>
		<tr>
			<th></th>
			<th>1</th>
			<th>2</th>
			<th>3</th>
			<th>4</th>
			<th>5</th>
			<th>6</th>
			<th>7</th>
			<th>8</th>
			<th>Total</th>
		</tr>
	</thead>
	<tbody>
		<tr><td>A</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
		<tr><td>B</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
		<tr><td>C</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
		<tr><td>D</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
		<tr><td>E</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
		<tr><td>F</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
		<tr><td>G</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
		<tr><td>Total</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
	</tbody>
</table>

Open in new window


Thank you
0
Comment
Question by:mhdi
2 Comments
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 total points
ID: 39934401
The sample in your question it would be
tr:first-child td{font-weight:bold;}
tr:last-child td{font-weight:bold;}

Open in new window

http://jsbin.com/yohak/1/edit?html,css,output

The sample in your fiddle will be similar. You can use first-child/last-child based on .row for instance. Or the container for a list of rows.
0
 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
ID: 39934430
You would also need

tr td:first-child{font-weight:bold;}
tr td:last-child{font-weight:bold;}

Open in new window

with Scott's solution
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
send keys not working in vba 7 58
Can't find PHP files on account that has WordPress 3 25
Changing Two Areas of a Page 5 13
div to fit another div 8 20
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

816 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now