نحوه استفاده از کد های html و cssدر جوملا

[alirezaataie]

آقا من این کارو کردم درست نشد
کد html
<h1>Responstable <span>2.0</span> by <span>jordyvanraaij</span></h1>

<table class="responstable">

<tr>
<th>Main driver</th>
<th data-th="Driver details"><span>First name</span></th>
<th>Surname</th>
<th>Date of birth</th>
<th>Relationship</th>
</tr>

<tr>
<td><input type="radio"/></td>
<td>Steve</td>
<td>Foo</td>
<td>01/01/1978</td>
<td>Policyholder</td>
</tr>

<tr>
<td><input type="radio"/></td>
<td>Steffie</td>
<td>Foo</td>
<td>01/01/1978</td>
<td>Spouse</td>
</tr>

<tr>
<td><input type="radio"/></td>
<td>Stan</td>
<td>Foo</td>
<td>01/01/1994</td>
<td>Son</td>
</tr>

<tr>
<td><input type="radio"/></td>
<td>Stella</td>
<td>Foo</td>
<td>01/01/1992</td>
<td>Daughter</td>
</tr>

</table>


کد css

/*

RESPONSTABLE 2.0 by jordyvanraaij
Designed mobile first!

If you like this solution, you might also want to check out the 1.0 version:
[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]

*/

// Default options for table style
$table-breakpoint: 480px;
$table-background-color: #FFF;
$table-text-color: #024457;
$table-outer-border: 1px solid #167F92;
$table-cell-border: 1px solid #D9E4E6;

// Extra options for table style (parse these arguments when including your mixin)
$table-border-radius: 10px;
$table-highlight-color: #EAF3F3;
$table-header-background-color: #167F92;
$table-header-text-color: #FFF;
$table-header-border: 1px solid #FFF;

// The Responstable mixin

@mixin responstable(
$breakpoint: $table-breakpoint,
$background-color: $table-background-color,
$text-color: $table-text-color,
$outer-border: $table-outer-border,
$cell-border: $table-cell-border,
$border-radius: none,
$highlight-color: none,
$header-background-color: $table-background-color,
$header-text-color: $table-text-color,
$header-border: $table-cell-border) {

.responstable {
margin: 1em 0;
width: 100%;
overflow: hidden;
background: $background-color;
color: $text-color;
border-radius: $border-radius;
border: $outer-border;

tr {
border: $cell-border;
&:nth-child(odd) { // highlight the odd rows with a color
background-color: $highlight-color;
}
}

th {
display: none; // hide all the table header for mobile
border: $header-border;
background-color: $header-background-color;
color: $header-text-color;
padding: 1em;
&:first-child { // show the first table header for mobile
display: table-cell;
text-align: center;
}
&:nth-child(2) { // show the second table header but replace the content with the data-th from the markup for mobile
display: table-cell;
span {display:none;}
&:after {content:attr(data-th);}
}
@media (min-width: $breakpoint) {
&:nth-child(2) { // hide the data-th and show the normal header for tablet and desktop
span {display: block;}
&:after {display: none;}
}
}
}

td {
display: block; // display the table data as one block for mobile
word-wrap: break-word;
max-width: 7em;
&:first-child {
display: table-cell; // display the first one as a table cell (radio button) for mobile
text-align: center;
border-right: $cell-border;
}
@media (min-width: $breakpoint) {
border: $cell-border;
}
}

th, td {
text-align: left;
margin: .5em 1em;
@media (min-width: $breakpoint) {
display: table-cell; // show the table as a normal table for tablet and desktop
padding: 1em;
}
}
}
}

// Include the mixin (with extra options as overrides)

@include responstable(
$border-radius: $table-border-radius,
$highlight-color: $table-highlight-color,
$header-background-color: $table-header-background-color,
$header-text-color: $table-header-text-color,
$header-border: $table-header-border);

// General styles

body {
padding: 0 2em;
font-family: Arial, sans-serif;
color: #024457;
background: #f2f2f2;
}

h1 {
font-family: Verdana;
font-weight: normal;
color: #024457;
span {color: #167F92;}
}



اگه راهنمایی کنید ممنون میشم