table header border - HTML / CSS

839 Expert 512MB

I don't succeed to create a table having a border just around the header.
The table records should have no border.
Please advise.

May 21 '07 #1

Subscribe Post Reply

2173

drhowarddrfine

7,435

Expert 4TB

One of two ways:
1) <th style="border: 1px solid red">
2) In css file:
#header{
border:1px solid red
}

<th id="header">

But without the code, I'm not sure if that's what you meant by 'header'.

May 21 '07 #2

dorinbogdan

839

Expert 512MB

The header is the top row, and should have border an all 4 sides (not between cells).
The code is here, but not working as desired:

Expand|Select|Wrap|Line Numbers

 <html>

    <style>

        tr.header{

            border: 2px solid black;

            }

        tr.line{

            border: 0px;

            }

    </style>

<body>

    <table cellpading="5" >

        <tr class="header">

            <th>Nom du tire</th>

            <th>Banque du tire</th>

            <th>RIIB du tire</th>

            <th>Echeance le</th>

            <th>Montant</td>

        </tr>

        <tr class="line">

            <td>ARCHE EDITEUR</td>

            <td>SANPAOLO P</td>

            <td>321654987</td>

            <td>10/05/07</td>

            <td>321.45</td>

        </tr>

        <tr class="line">

            <td>ARCHE EDITEUR</td>

            <td>SANPAOLO P</td>

            <td>321654987</td>

            <td>10/05/07</td>

            <td>321.45</td>

        </tr>

    </table>
 
</body>

</html>

May 21 '07 #3

drhowarddrfine

7,435

Expert 4TB

I don't think you are going to be able to do it that way. A row is just a grid but not an actual object which can be styled. You may want to rethink how you do that.

Without giving it any thought, each <th> can be set with no spacing between each column/cell and give a border to each side but left and right, thus giving the appearance of one continuous row.

May 21 '07 #4

dorinbogdan

839

Expert 512MB

It works almost fine, now I just try to get rid of the small space between cells:

Expand|Select|Wrap|Line Numbers

 <html>

    <style>

        th.h1{

            border-bottom:1px solid black;

            border-left:1px solid black;

            border-top:1px solid black;

            margin:0px;

            }

        th.h2{

            border-bottom:1px solid black;

            border-top:1px solid black;

            border-right-width:0px;

            border-left-width:0px;

            margin:0px;

            }

        th.h3{

            border-bottom:1px solid black;

            border-right:1px solid black;

            border-top:1px solid black;

            border-left-width:0px;

            margin:0px;

            }

        tr.line{

            border: 0px;

            }

    </style>

<body>

    <table CELLPADDING="5" >

        <tr>

            <th class="h1">Nom du tire</th>

            <th class="h2">Banque du tire</th>

            <th class="h2">RIIB du tire</th>

            <th class="h2">Echeance le</th>

            <th class="h3">Montant</td>

        </tr>

        <tr class="line">

            <td>ARCHE EDITEUR</td>

            <td>SANPAOLO P</td>

            <td>321654987</td>

            <td>10/05/07</td>

            <td>321.45</td>

        </tr>

        <tr class="line">

            <td>ARCHE EDITEUR</td>

            <td>SANPAOLO P</td>

            <td>321654987</td>

            <td>10/05/07</td>

            <td>321.45</td>

        </tr>

    </table>
 
</body>

</html>

May 21 '07 #5

nomad

664

Expert 512MB

You can do this as well.
Have two seperate tables
One for the header the other for the rows and col

you can use
cellspacing="2" this one make spacing between the col
cellpadding="2 this one make two spaces between the col line ie you get two lines for each col.

[CODE

<body>
<table width="550" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>

<table width="550" border="0" cellspacing="2" cellpadding="2">
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
CODE]

nomad

May 22 '07 #6

Similar topics

Need Help Converting A Table To CSS

by: Robert P. Stearns | last post by:

I have been trying to convert the following simple table into CSS. <table> <tr><th colspan=2>Header Area</th></tr> <tr><th>Navigation Area</th><th>Information Area</th></tr> <tr><th...

HTML / CSS

Spacing in a Table

by: JBH | last post by:

I'm having difficulty removing spacing between two rows in a table. Below is a copy of my source code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>About...

HTML / CSS

Automatically scrolling a dynamic table

by: dschectman | last post by:

I have an interesting issue. I need to implement a dynamic table to mimic a select list. Each time you double click from the master list, a row is added to the list of selected items. The list...

Javascript

Scrolling Table

by: Shawn B. | last post by:

Greetings, I am trying to create a table that has a scrolling body. The problem I'm experiencing is that if the columns in the "body" part of the table exceed the width of the "header" then...

ASP.NET

Table with filtering to the content

by: Romulo NF | last post by:

Greetings again everyone Recently i´ve been asked to develop a script to allow filtering in the content of the table, with dinamic options based on the own content. Example: a table with the name of...

Javascript

Grid table (add, remove, import, edit)

by: Romulo NF | last post by:

Greetings again to everyone, Im back to show this grid componenet i´ve developed. With this grid you can show the data like a normal table, remove the rows that you need, add rows, import data,...

Javascript

Header position on Table layout

by: daniel2335 | last post by:

Hello people, I could do with a little help.. I have been piecing some code together to make a table with a fixed header and that has light up rows. I thought id got it but I notice when i scroll...

HTML / CSS

Drag & Drop Table Columns (new version, explained)

by: Romulo NF | last post by:

Greetings, I´m back here to show the new version of the drag & drop table columns (original script ). I´ve found some issues with the old script, specially when trying to use 2 tables with...

Javascript

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA