2

I want to align text within <th> of table like row wise so that it will look at same level. Right now the headings are looking like ups and down. So want to look it properly as a row.

e.g titles like Americas Center, Asheville, ..., Coopersville should be seen in one row; XX% in second row; Eligible: xxxx in third row; Registered: xxxxx in forth row.

Result should be like this:

enter image description here

But how do I do that in <th> keeping background color same and they should not have border like other rows have.

I have used <br/> to separate the text but that's not giving the proper aligned look. How do I do that? Is there any way to show data in <th> as row?

The code can find here: https://jsfiddle.net/kirankapur/dka361qz/

kiran
  • 641
  • 2
  • 12
  • 34
  • What do you mean with "they look like ups and downs"? Do you want that all the headings start at the top of the line, for example? Then try using `vertical-align: top;`, otherwise specify your question. – Plasher Apr 09 '15 at 11:05
  • I have made the edits in my question. hoping now i am clear with my question. – kiran Apr 09 '15 at 11:31

3 Answers3

2

Instead of trying to use line breaks to align the text as rows, I would wrap each set of elements in a table row using a separate tr block for each set of elements, a separate for the caption, the Eligible status, and the Registered status.

If you want to keep the text from wrapping, you can wrap it in a div and use white-space: nowrap.

To deal with the borders, remember to set border=0 and cellspacing=0 in your table tag (you might be able to do this in CSS but I have been doing using this reset for years out of habit and it works).

See: https://jsfiddle.net/audetwebdesign/0rkvtncm/

Note: I added color values to your headers just to illustrate how you can select the various components of text to get precise control in styling.

Additional Styling: If you want to add top and bottom borders to the table cells outside of the header area, you can add the following CSS rules:

table.local tbody.table-hover td {
    border-top: 1px dashed blue;
}
table.local tbody.table-hover tr:last-child td {
    border-bottom: 1px dashed blue;
}

Note that the CSS border properties are not inherited. Applying border properties to the tr elements will not have an effect; border properties must be applied directly to td (or th) elements.

I added the borders in the jsfiddle demo.

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
  • but now titles are aligned. how do I make remaining data also aligned as titles you made? data like XX%, Eligible: xxxx, Registered: xxxxx, should be aligned as like titles. thanks. – kiran Apr 09 '15 at 11:23
  • I don't quite understand what the text should look like, Can you draw an image or provide more description in your original question? – Marc Audet Apr 09 '15 at 12:36
  • 1
    please check above image that I have added. is it possible to do any css coding in `` element to achieve that? or we should not use `` in this case? – kiran Apr 09 '15 at 12:53
  • hey thanks for giving me the new way to deal with that kind of problem. The above result which is shown in the image that I have made by removing the `..` and using separate `` to get that alignment. And I was trying to apply inline css to ``. But css was not working for `` and it worked for ``. And I got above result. – kiran Apr 10 '15 at 05:29
  • In your result to get that alignment, we have to remove _border-top and border-bottom_ of `` . To get result I have also removed that border of ``. But is there any way to keep border in between ``? not in the heading rows but for other rows except heading. e.g. _border-top and border-bottom_ for rows starting with Irving, Norcross, San Carlos. – kiran Apr 10 '15 at 05:41
  • @kiran I modified the jsFiddle and added comments in my original answer. You can keep keep the `thead` and `tbody` elements. Borders have no effect on `tr` elements, they must be applied directly to `td` and `th` elements. – Marc Audet Apr 10 '15 at 10:46
  • @ Marc Audet: thanks for your answer. just want to clear one thing, _Applying border properties to the `tr` elements will not have an effect_ Is this applicable for my question case only or its general? because if you look at my jsfiddle in the question there is `table.local tr { border-top: 1px solid #C1C3D1; border-bottom-: 1px solid #C1C3D1;` used which i was saying you had removed. and also searched for it then got this: http://stackoverflow.com/questions/10040842/add-border-bottom-to-table-row-tr . – kiran Apr 10 '15 at 11:04
  • @ Marc Audet: I am guessing that some css effects are not applicable for `tr` as I was trying that and mentioned in my second last comment. – kiran Apr 10 '15 at 11:05
  • @kiran You are right, some CSS properties have no effects on `tr` elements. In addition, some properties are not inherited, `border` for example. For properties like `border`, if you set them in the parent element, then you either have to specify them on the child or use the `inherit` value, for example, `border: inherit`. – Marc Audet Apr 10 '15 at 11:16
  • @ Marc Audet: ohh ok. Got it now.:) Thats what done here: http://stackoverflow.com/questions/10040842/add-border-bottom-to-table-row-tr Set border property in parent element `tr` and specified on child `td`. Thanks a lot Marc Audet. – kiran Apr 10 '15 at 11:24
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/74926/discussion-between-kiran-and-marc-audet). – kiran Apr 10 '15 at 11:33
0

Replace your css for 

table.local th{
    vertical-align: middle;
}

with 

table.local th{
    vertical-align: middle;
}
Alvaro Montoro
  • 28,081
  • 7
  • 57
  • 86
Arpita Shekhar
  • 73
  • 5
0

Go with UL-LI structure inside . This will solve the issue

Find the code here: 

.table-fill {
  background: white;
  height: 320px;
  margin: auto;
  padding: 5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}
table.local th {
  color: #FFF;
  ;
  background: #9ea7af;
  border-right: 1px solid #787E89;
  font-size: 17px;
  font-weight: 100;
  padding: 18px;
  text-align: left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align: middle;
}
table.local th:first-child {
  border-top-left-radius: 0px;
}
table.local th:last-child {
  border-top-right-radius: 0px;
  border-right: none;
}
table.local tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color: #666B85;
  font-size: 16px;
  font-weight: normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
/*tr:hover td {
  background:#4E5066;
  color:#FFFFFF;
  border-top: 1px solid #22262e;
  border-bottom: 1px solid #22262e;
}*/

table.local tr:first-child {
  border-top: none;
}
table.local tr:last-child {
  border-bottom: none;
}
table.local tr:nth-child(odd) td {
  background: #EBEBEB;
}
/*tr:nth-child(odd):hover td {
  background:#4E5066;
}*/

table.local tr:last-child td:first-child {
  border-bottom-left-radius: 0px;
}
table.local tr:last-child td:last-child {
  border-bottom-right-radius: 0px;
}
table.local td {
  background: #FFFFFF;
  padding: 15px;
  text-align: left;
  vertical-align: middle;
  font-weight: 300;
  font-size: 15px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}
table.local td:last-child {
  border-right: 0px;
}
table.local th.text-left {
  text-align: left;
}
table.local th.text-center {
  text-align: center;
}
table.local th.text-right {
  text-align: right;
}
table.local td.text-left {
  text-align: left;
}
table.local td.text-center {
  text-align: center;
}
table.local td.text-right {
  text-align: right;
}
table.local th ul {}
<table class="local table-fill">
  <thead>
    <tr>
      <th class="text-left">
        <ul>
          <li style="font-weight:bold;">Americas Center</li>
          <li style="font-size:20px">
            XX%</li>

          <li style="font-weight:bold;">Eligible: xxxx</li>

          <li style="font-weight:bold;">Registered: xxxxx</li>
        </ul>
      </th>
      <th class="text-left">
        <ul>
          <li><span style="font-weight:bold;">Asheville</span>

          </li>
          <li><span style="font-size:20px">
                            XX%</span>

          </li>
          <li><span style="font-weight:bold;">Eligible:</span> xxxx

          </li>
          <li><span style="font-weight:bold;">Registered:</span> xxxxx</li>
        </ul>
      </th>
      <th class="text-left">
        <ul>
          <li><span style="font-weight:bold;">Austin</span>
          </li>
          <li>
            <span style="font-size:20px">
                            XX%</span>
          </li>
          <li>
            <span style="font-weight:bold;">Eligible:</span> xxxx
          </li>
          <li>
            <span style="font-weight:bold;">Registered:</span> xxxxx
          </li>
        </ul>
      </th>
      <th class="text-left">
        <ul>
          <li>
            <span style="font-weight:bold;">Buffalo Grove</span>
          </li>
          <li><span style="font-size:20px">
                                XX%</span>
          </li>
          <li>
            <span style="font-weight:bold;">Eligible:</span> xxxx
          </li>
          <li><span style="font-weight:bold;">Registered:</span> xxxxx
          </li>
        </ul>
      </th>
      <th class="text-left">
        <ul>
          <li><span style="font-weight:bold;">Charlotte</span>
            etc

          </li>
        </ul>
      </th>
      <th class="text-left">
        <ul>
          <li><span style="font-weight:bold;">Columbia</span>
          </li>
        </ul>
      </th>
      <th class="text-left">
        <ul>
          <li><span style="font-weight:bold;">Coopersville</span>
          </li>
        </ul>

      </th>


    </tr>
  </thead>
  <tbody class="table-hover">
    <tr>
      <td class="text-left">Irving</td>
      <td class="text-left">Louisville</td>
      <td class="text-left">Manchester</td>
      <td class="text-left">Marlborough</td>
      <td class="text-left">Memphis</td>
      <td class="text-left">Milpitas</td>
      <td class="text-left">Morgan Hill</td>
    </tr>
    <tr>
      <td class="text-left">Norcross</td>
      <td class="text-left">Northfield</td>
      <td class="text-left">Overland Park</td>
      <td class="text-left">Pennsylvania</td>
      <td class="text-left">Plano</td>
      <td class="text-left">Raleigh</td>
      <td class="text-left">RTS</td>
    </tr>
    <tr>
      <td class="text-left">San Carlos</td>
      <td class="text-left">San Diego</td>
      <td class="text-left">Telecommuters</td>
      <td class="text-left">Tempe</td>
      <td class="text-left">Valencia</td>
      <td class="text-left"></td>
      <td class="text-left"></td>
    </tr>

  </tbody>
</table>
aston
  • 632
  • 5
  • 17