Solved

Css for table.  Two columns.  Need outside border and 1 vertical border down middle

Posted on 2014-01-26
22
357 Views
Last Modified: 2014-02-09
Well

This is so simple I am almost ashamed to ask.  However as I think about it, I am always in for a surprise for even my most simple questions on EE -- including "best practices" etc, that I don't always find elsewhere..   So here goes.

I have a table I want to style with css.

1)  It's a two column table.
2)  I want the outside of the table to have a 1 pixel border (collapsed)
3)  And a 1 pixel border vertically down the middle.

And while we're at it.  I might as well have the css for a three column border with two vertical columns down the middle.

And finally, in SOME rows I want to be able to have an indention of 10 px before the wording starts.  Not in all rows, just in some.  I guess I could do it with spaces, but I figure there's a better way with css......


Thanks!

Rowby
0
Comment
Question by:Rowby Goren
  • 8
  • 8
  • 5
22 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39810161
hi rowby,

if you're still using tables, you should consider not doing so.

but if you have no other choice, then you'll need to apply styles to the tds to get your lines down the columns. for example:

tr td:nth-child(x){
  border-right:1px solid black;
}
depending on which "column" you want to have the line, you can use :nth-child(x), where x is a number.

for the whole table you can just do:

table{
border:1px solid black;
}
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39810168
you can apply a class to certain tds to get the indetation:

<td class="pad10">

.pad10{
padding;10px;
}
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39810182
Hi all

Kyle, I see your indention solution, but because people with very little css tech will be doing some of the various table styling down the road, can I create a style for just the text in a cell, that could be applied as a span, for instance, so they would not have to go into the stylesheet itself whenever they want to indent some text in a table cell.  (How is that for a run-on sentence!)
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39810190
2 column table  http://jsbin.com/padasQ_28348454/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <style>
    table{
border-collapse:collapse;
border-style:solid;
border-color:red;     
}
table td:nth-child(2){border-left:solid;}
    table td{padding-left:10px;}    

  </style>
<meta charset=utf-8 />
<title>padas</title>
</head>
<body>
  <table>
    <tr><td>r1 c1</td><td>r1 c2</td></tr>
      <tr><td>r2 c1</td><td>r2 c2</td></tr>
     <tr><td>r3 c1</td><td>r3 c2</td></tr>
  </table>
</body>
</html>
  

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39810191
It would be best if you can add the style to the style sheet, then nobody needs to worry about padding and borders, just entering in text.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39810193
3 col http://jsbin.com/padasQ_28348454/2/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <style>
    table{
border-collapse:collapse;
border-style:solid;
border-color:red;     
}
table td:nth-child(2),table td:nth-child(3){border-left:solid;}
    table td{padding-left:10px;}    

  </style>
<meta charset=utf-8 />
<title>padas</title>
</head>
<body>
  <table>
    <tr><td>r1 c1</td><td>r1 c2</td><td>r1 c3</td></tr>
      <tr><td>r2 c1</td><td>r2 c2</td><td>r2 c3</td></tr>
     <tr><td>r3 c1</td><td>r3 c2</td><td>r3 c3</td></tr>
  </table>
</body>
</html>
  

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39810200
Hi Padas,

The problem is this is going to be  a template that will be used for different tables on different pages in the future, and those tables will need "indentions" in different cells and columns, depending on the text content.

I don't want them to touch a stylesheet (they wouldn 't know how to do that anyway) -- which is why I would rather that they highlight any text they want "indented" and choose the "indent" span from the drop down menu that is in the editing system -- and only that line will be indented.

????

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39810201
Padas,

On a side note, I caught the link to the other site before it was deleted.  I found it very useful and informative and I bookmarked it.

So I understand EE's terms and conditions, etc, could that link have been included in a comment --  if the Expert also included their suggested solution?

Rowby
0
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 200 total points
ID: 39810219
i dont know which text editor library you're using. in TINYMCE for example, you can create your own rules and make them available in the drop-down
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39810221
padas, im not sure why you repeated my solution?
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 9

Author Comment

by:Rowby Goren
ID: 39810226
Yes, Kyke, it is an editor based on TINYMCE, so a dropdown will be available.  So that would be what I would have them use for a generic "tab" on any specific text in a column.  I think the span/style should only be an "indent" -- so the text will take the font, etc from whatever has been set up for the table -- most likely body text.

Rowby
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39810232
an"indent" would typically be implemented as padding. you will not lose any other inherited styles by applying padding.

if you need help setting up the editor to display the option, please post more details, or a link
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 300 total points
ID: 39810257
>if you're still using tables, you should consider not doing so.

Tables are great for tabular data.  Not so great for layout.  We don't know what the able is being use for at this point.

>The problem is this is going to be  a template that will be used for different tables on different pages in the future, and those tables will need "indentions" in different cells and columns, depending on the text content.

Set up specific classes that will take care of what you want.  In tinymce, you can include all or portions of your css that your users can have access to.  By including your custom css styles, they can show up in the styles drop down.  Just name the classes something easy they will understand.

>I don't want them to touch a stylesheet
Correct, they wouldn't touch the style sheet, especially if you are using tinymce or similar.  You do want to set the classes up for them in the style sheet.

>So I understand EE's terms and conditions, etc, could that link have been included in a comment --  if the Expert also included their suggested solution?

Yes, links can be a back up to an answer, but they should not BE the answer.  

>padas, im not sure why you repeated my solution?

I am working on multiple projects including answering this question and already started on this answer prior to you posting.  As it turns out, I posted a working code sample.  I assure you, I don't need to see what somebody else posts in webdev and then try and repeat their answer.  It was just two similar ideas.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39810292
You can indent by giving a td a class instead http://jsbin.com/padasQ_28348454/3/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <style>
    table{
      width:300px;      
border-collapse:collapse;
border-style:solid;
border-color:red;     
}
table td:nth-child(2){border-left:solid;}
   .indent10px{padding-left:10px;}   
   .indent20px{padding-left:20px;} 
  
  </style>
<meta charset=utf-8 />
<title>padas</title>
</head>
<body>
  <table>
    <tr><td class="indent10px">r1 c1</td><td>r1 c2</td></tr>
      <tr><td class="indent20px">r2 c1</td><td>r2 c2</td></tr>
     <tr><td class="indent10px">r3 c1</td><td>r3 c2</td></tr>
  </table>
</body>
</html>
  

Open in new window


A few of helpful links
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
http://coboldinosaur.com/pages/Tables-Part-2.html  Cd& is a top CSS expert here
http://www.w3schools.com/tags/att_table_cellpadding.asp
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39810294
Hi  The table will be for tabular data and for this particular situation it has to be a table.

We are almost finished and I will be splitting points for the solution....

So I have all the info I need for styling borders, I think.

And I just have to create my span (TinyMCE) style for the text with the padding on the left.

Since the text will be in a cell I am assuming that the style will not be based on a paragraph (p) style, but can be focused on text in a table cell.

So based on text being in a table cell, I assume I can use Hamilton's

.pad10{
padding;10px;
}

...in my stylesheet and give it a nice name for non-css "civilians" such as

.indentpad10 {
padding:10px;
)

Then the user can highlight the text, and apply the style from the dropdown resulting in the text being indented.  

Right??

Thanks

Rowby
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39810302
>span (TinyMCE) style for the text with the padding on the left.

You don't have to use a span.  I would simply apply the style to the td that you want the padding.  

Either way gives the same visual experience.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39810315
Hi Padas,

 I would simply apply the style to the td that you want the padding.  
If I am interpreting your suggestion, I don't want to put the style in the HTML  td itself, since some versions of the table will not have the "indent" in the same cell.

The table will become a editor template which users can use over and over again for similar tabular data.  And in some cases there will be no indents of data and in some cases different texts in cells will or will not have "indents".

 So I want to be able to do my "indenting" via a dropdown in the TinyMC Editor

Rowby
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39810393
You are interpreting my suggestion in the wrong way.  I never would suggest to style the table directly.  If you look at my sample, I am suggesting to create your classes that will be used for your indenting.  Load those classes in the custom css http://www.tinymce.com/tryit/custom_formats.php

When somebody is editing data in the table, and they want the indent, they will choose the drop down for your indent class.  There is no need to apply it to a span. That just creates another tag that is not needed.  

After you create the class, then the user applies the class to their text.  If you look at my answer http:#a39810292, I have suggested to use a class.  The example uses indent10px or indent20px.  In this case, it would not matter if it was a table td or a paragraph. By applying that class, it will indent.   I wouldn't get hung up on if it is a td or div or span.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39810415
Thanks, Scott.  

I will begin applying yours and others suggestions a little later today.

Thanks all!

Rowby
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39810428
One  quick clarification, if you create a custom css just for tinymce, you still have to put those styles in your css the site will access.  I prefer to not put the full css in tinymce, just what is needed.
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 39846172
thanks Scott and Kyle,

I got all the information to fix my table.

Sorry for the delay in awarding the poiints!

Rowby
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

746 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

13 Experts available now in Live!

Get 1:1 Help Now