Add border-collapse:collapse to your table rule: table { border-collapse: collapse; } Example table { border-collapse: collapse; } tr { border-bottom: 1pt solid black; } <table> <tr><td>A1</td><td>B1</td><td>C1</td></tr> <tr><td>A2</td><td>B2</td><td>C2</td></tr> <tr><td>A2</td><td>B2</td><td>C2</td></tr> </table> Link
You can use white-space: pre; to make elements act like <pre>, which preserves newlines. Example: p { white-space: pre; } <p>hello How are you</p> Note for IE that this only works in IE8+.
For the parent element, add the following properties: .parent { overflow: hidden; position: relative; width: 100%; } then for .child-right these: .child-right { background:green; height: 100%; width: 50%; position: absolute; right: 0; top: 0; } Find more detailed results with CSS examples here and more information about equal height columns here.
TL;DR: use px. The Facts First, it’s extremely important to know that per spec, the CSS px unit does not equal one physical display pixel. This has always been true – even in the 1996 CSS 1 spec. CSS defines the reference pixel, which measures the size of a pixel on a 96 dpi display. … Read more
Editing or overriding the row in Twitter bootstrap is a bad idea, because this is a core part of the page scaffolding and you will need rows without a top margin. To solve this, instead create a new class “top-buffer” that adds the standard margin that you need. .top-buffer { margin-top:20px; } And then use … Read more
Yes, you can use the shadow spread property of the box-shadow rule: .myDiv { border: 1px solid #333; width: 100px; height: 100px; box-shadow: 10px 0 5px -2px #888; } <div class=”myDiv”></div> The fourth property there -2px is the shadow spread, you can use it to change the spread of the shadow, making it appear that … Read more
Use word-wrap:break-word; It even works in IE6, which is a pleasant surprise. word-wrap: break-word has been replaced with overflow-wrap: break-word; which works in every modern browser. IE, being a dead browser, will forever rely on the deprecated and non-standard word-wrap instead. Existing uses of word-wrap today still work as it is an alias for overflow-wrap … Read more
Approach 1 – transform translateX/translateY: Example Here / Full Screen Example In supported browsers (most of them), you can use top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically vertically/horizontally center the element. .container { position: absolute; top: 50%; left: 50%; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } <div class=”container”> <span>I’m … Read more
Unfortunately this is intentional… This is a well know issue (at least in safari mobile), which is intentional, as it prevents other problems. Benjamin Poulain replied to a webkit bug: This is completely intentional. It took quite a bit of work on our part to achieve this effect. 🙂 The base problem is this: the … Read more
> is the child combinator, sometimes mistakenly called the direct descendant combinator.1 That means the selector div > p.some_class only matches paragraphs of .some_class that are nested directly inside a div, and not any paragraphs that are nested further within. This implies that every element matching div > p.some_class necessarily also matches div p.some_class, with … Read more