How to + (addition) values (numbers) together inphp? - php

I am currently developing a tool and part of it calculates employees. I want to be able to get 12 numbers of thier row from different coloumns...
E.G.
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<table>
<tr>
<th>Name</th>
<th>Data 1</th>
<th>Data 2</th>
<th>Data 3</th>
<th>Data 4</th>
<th>Data 5</th>
<th>Data 6</th>
<th>Data 7</th>
<th>Data 8</th>
<th>Data 9</th>
<th>Data 10</th>
<th>Data 11</th>
<th>Data 12</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>67</td>
<td>34</td>
<td>67</td>
<td>34</td>
<td>67</td>
<td>34</td>
<td>67</td>
<td>34</td>
<td>34</td>
<td>67</td>
<td>34</td>
<td>67</td>
</tr>
</table>
How to I add all of those together to make one number in php and display it on a dashboard? (Connects to MYSQL)


You can use jquery to get all td value and concate that and pass it to php file using ajax.
$('#mytable td').each(function() {
var cellText += $(this).html();
});
then pass this value to ajax call.

Related

How do I create a 10x10 addition table using PHP?

I need a hand with this project I am working on, I cant seem to find out why my code isn't working. My goal is to display a addition table similar to this one:
My code for this table so far is:
<!DOCTYPE html>
<html>
<body>
<?php
$cols = 10;
$rows = 10;
?>
<?php echo "<table border=\"1\">";
<?php echo "<table>";
for($a = 1; $a < $rows;$a++)
echo'<tr>';
for($b = 1;$b < $cols; $b++);
echo '<td>'($answer = $a + $b); '</td>'
echo"</table>";
?>
<br>
</body>
</html>

There are a bunch of typos and omissions. The worst are the missing or extraneous semicolons
Here is working code using array notation
https://onlinephp.io/c/a97d8
<?php
$cols = 10;
$rows = 12;
$table[]="<table><tbody><tr><td>+</td>";
for($a = 1; $a < $rows;$a++) {
$table[] = "<td>$a</td>";
for($b = 1;$b < $cols; $b++) $table[]= "<td>".($answer = $a + $b)."</td>";
if ($a<$rows-1) {
$table[] = "</tr>";
$table[] = "<tr><td>$a</td>";
}
}
$table[] = "</tr></tbody></table>";
echo implode($table);
?>
Output
Note the CSS - it is quite complex
table tr:nth-of-type(2n+3) : stripe from 3rd row
table {
border-collapse: collapse;
font-weight: bold;
color: blue;
font-family: Arial, Helvetica, sans-serif;
}
table td {
border: 1px solid #ccc;
width: 2em;
padding: 5px;
text-align: center;
}
table tr:first-of-type {
background-color: gold;
color: black;
}
table tr td:first-child {
background-color: pink;
color: black;
}
table tr:first-child>td:first-child {
background-color: orange;
}
table tr:nth-of-type(2n+3) {
background-color: #f2f2f2;
}
<table>
<tbody>
<tr>
<td>+</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>

Easiest way to do this is with PHP and CSS Grid:
https://paiza.io/projects/oHTe6JJGbeXX85Hij6X0VQ?language=php
<div class="table">
<?php
$rows = 10;
$cols = 10;
for($i=0; $i<$rows+1; $i++)
{
for($j=0; $j<$cols+1; $j++)
{
echo "<div>";
echo $i == 0 && $j == 0 ? "+" : $i + $j;
echo "</div>";
}
}
?>
</div>
Result:
.table {
display: grid;
grid-template-columns: repeat(11, 1fr);
}
.table > div {
font-family:sans-serif;
padding: 5px 5px;
border: solid 1px;
text-align: center;
}
.table > div:first-child {
background-color: orange;
}
.table > div:nth-child(11n + 12) {
background-color: pink;
}
.table > div:nth-child(n+2):nth-child(-n+11) {
background-color: goldenrod;
}
<div class="table">
<div>+</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div></div>

PHP dynamic calander

Im trying to make a calander in php (for school). it has to be made 100% generated values. I can do that but I cant figure out how to make it start on monday. It has to be made with only php and html,so no js css or sql is allowed to make it easier. I'm probaly doing everything wrong here but if anyone knows how I can make a calander, all help is welcome. (:
<?php
$D1 = date("l-j-m");
$D2 = date("l-j-m", strtotime("+ 1 days"));
$D3 = date("l-j-m", strtotime("+ 2 days"));
$D4 = date("l-j-m", strtotime("+ 3 days"));
$D5 = date("l-j-m", strtotime("+ 4 days"));
$D6 = date("l-j-m", strtotime("+ 5 days"));
$D7 = date("l-j-m", strtotime("+ 6 days"));
$U1 = date("g-a");
$U2 = date("g-a", strtotime("+ 1 hours"));
$U3 = date("g-a", strtotime("+ 2 hours"));
$U4 = date("g-a", strtotime("+ 3 hours"));
$U5 = date("g-a", strtotime("+ 4 hours"));
$U6 = date("g-a", strtotime("+ 5 hours"));
$U7 = date("g-a", strtotime("+ 6 hours"));
$U8 = date("g-a", strtotime("+ 1 hours"));
$U9 = date("g-a", strtotime("+ 2 hours"));
$U10 = date("g-a", strtotime("+ 3 hours"));
$U11 = date("g-a", strtotime("+ 4 hours"));
$U12= date("g-a", strtotime("+ 5 hours"));
$U13 = date("g-a", strtotime("+ 6 hours"));
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Recept 2</title>
</head>
<body>
<table border="solid">
<thead>
<tr>
<th></th>
<th><?php echo($D1); ?></th>
<th><?php echo($D2); ?></th>
<th><?php echo($D3); ?></th>
<th><?php echo($D4); ?></th>
<th><?php echo($D5); ?></th>
<th><?php echo($D6); ?></th>
<th><?php echo($D7); ?></th>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo($U1); ?></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><?php echo($U2); ?></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><?php echo($U3); ?></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><?php echo($U4); ?></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><?php echo($U5); ?></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><?php echo($U6) ?></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><?php echo($U7); ?></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><?php echo($U8); ?></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>1<?php echo($U9); ?></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><?php echo($U10); ?></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><?php echo($U11); ?></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><?php echo($U12); ?></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

You can use the following HTML template along with the PHP code below - not the most elegant solution but should be simple enough for understanding by a newbie:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
<style type="text/css">
th.br_bot
{
border-bottom: 1px solid black;
padding: 2px;
}
th.br_btr
{
border-bottom: 1px solid black;
border-right: 1px solid black;
padding: 2px;
}
td.week_num
{
font-size: 9pt;
border-bottom: 1px solid black;
border-right: 1px solid black;
background-color: #D0D0D0;
padding: 2px;
}
td.day
{
font-size: 9pt;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
td.day_red
{
font-size: 9pt;
border-bottom: 1px solid black;
border-right: 1px solid black;
background-color: #EFC2C3;
}
td.day_blue
{
font-size: 9pt;
border-bottom: 1px solid black;
border-right: 1px solid black;
background-color: #B6CBEF;
}
span.week_day
{
color: black;
}
span.week_end
{
color: red;
}
</style>
</head>
<body>
<table id="cal" cellspacing="0" cellpadding="0" style="border-left:1px solid black; border-top:1px solid black;font-weight:bold;">
<tr style="font-size:9pt;" bgcolor="#D6B695">
<th colspan="8" class="br_btr"> JANUARY </th>
<th colspan="8" class="br_btr"> FEBRUARY </th>
<th colspan="8" class="br_btr"> MARCH </th>
<th colspan="8" class="br_btr"> APRIL </th>
</tr>
<tr>
<th class="br_bot"> </th>
<th class="br_bot">M</th>
<th class="br_bot">T</th>
<th class="br_bot">W</th>
<th class="br_bot">T</th>
<th class="br_bot">F</th>
<th class="br_bot">S</th>
<th class="br_btr">S</th>
<th class="br_bot"> </th>
<th class="br_bot">M</th>
<th class="br_bot">T</th>
<th class="br_bot">W</th>
<th class="br_bot">T</th>
<th class="br_bot">F</th>
<th class="br_bot">S</th>
<th class="br_btr">S</th>
<th class="br_bot"> </th>
<th class="br_bot">M</th>
<th class="br_bot">T</th>
<th class="br_bot">W</th>
<th class="br_bot">T</th>
<th class="br_bot">F</th>
<th class="br_bot">S</th>
<th class="br_btr">S</th>
<th class="br_bot"> </th>
<th class="br_bot">M</th>
<th class="br_bot">T</th>
<th class="br_bot">W</th>
<th class="br_bot">T</th>
<th class="br_bot">F</th>
<th class="br_bot">S</th>
<th class="br_btr">S</th>
</tr>
<tr><td>{SECTION_1}</td></tr>
<tr style="font-size:9pt;" bgcolor="#D6B695">
<th colspan="8" class="br_btr"> MAY </th>
<th colspan="8" class="br_btr"> JUNE </th>
<th colspan="8" class="br_btr"> JULY </th>
<th colspan="8" class="br_btr"> AUGUST </th>
</tr>
<tr>
<th class="br_bot"> </th>
<th class="br_bot">M</th>
<th class="br_bot">T</th>
<th class="br_bot">W</th>
<th class="br_bot">T</th>
<th class="br_bot">F</th>
<th class="br_bot">S</th>
<th class="br_btr">S</th>
<th class="br_bot"> </th>
<th class="br_bot">M</th>
<th class="br_bot">T</th>
<th class="br_bot">W</th>
<th class="br_bot">T</th>
<th class="br_bot">F</th>
<th class="br_bot">S</th>
<th class="br_btr">S</th>
<th class="br_bot"> </th>
<th class="br_bot">M</th>
<th class="br_bot">T</th>
<th class="br_bot">W</th>
<th class="br_bot">T</th>
<th class="br_bot">F</th>
<th class="br_bot">S</th>
<th class="br_btr">S</th>
<th class="br_bot"> </th>
<th class="br_bot">M</th>
<th class="br_bot">T</th>
<th class="br_bot">W</th>
<th class="br_bot">T</th>
<th class="br_bot">F</th>
<th class="br_bot">S</th>
<th class="br_btr">S</th>
</tr>
<tr><td>{SECTION_2}</td></tr>
<tr style="font-size:9pt;" bgcolor="#D6B695">
<th colspan="8" class="br_btr"> SEPTEMBER </th>
<th colspan="8" class="br_btr"> OCTOBER </th>
<th colspan="8" class="br_btr"> NOVEMBER </th>
<th colspan="8" class="br_btr"> DECEMBER </th>
</tr>
<tr>
<th class="br_bot"> </th>
<th class="br_bot">M</th>
<th class="br_bot">T</th>
<th class="br_bot">W</th>
<th class="br_bot">T</th>
<th class="br_bot">F</th>
<th class="br_bot">S</th>
<th class="br_btr">S</th>
<th class="br_bot"> </th>
<th class="br_bot">M</th>
<th class="br_bot">T</th>
<th class="br_bot">W</th>
<th class="br_bot">T</th>
<th class="br_bot">F</th>
<th class="br_bot">S</th>
<th class="br_btr">S</th>
<th class="br_bot"> </th>
<th class="br_bot">M</th>
<th class="br_bot">T</th>
<th class="br_bot">W</th>
<th class="br_bot">T</th>
<th class="br_bot">F</th>
<th class="br_bot">S</th>
<th class="br_btr">S</th>
<th class="br_bot"> </th>
<th class="br_bot">M</th>
<th class="br_bot">T</th>
<th class="br_bot">W</th>
<th class="br_bot">T</th>
<th class="br_bot">F</th>
<th class="br_bot">S</th>
<th class="br_btr">S</th>
</tr>
<tr><td>{SECTION_3}</td></tr>
</table>
</body>
</html>
<?php
// returns HTML for the given month
function month_calendar($year,$month)
{
$my_time = mktime(0,0,0,$month,1,$year); // Unix timestamp for the beginning of the month
$start_day = date('N', $my_time);
$start_week = (int)date('W',$my_time); // because date returns zero-padded value
$daysInMonth = date('t',$my_time); // how many days in the given month
$dayNumber = date('z',$my_time) + 1; // day of the year for the 1st date of the month (0 - 365)
$output = Array();
// show first week
$current_week = '<td align="center" class="week_num">'.($start_week++).'</td>';
if($start_week > 52) $start_week = 1;
$dayOfWeek = 1;
while($dayOfWeek < $start_day)
{
// show empty cells until we reach the start of the month
$current_week .= '<td class="day"> </td>';
$dayOfWeek++;
}
$dayOfMonth = 1;
while($dayOfWeek <= 7)
{
$current_week .= '<td class="day"><span class="week_'.($dayOfWeek > 5 ? 'end' : 'day').'" style="padding:2px">'.($dayOfMonth++).'</span></td>';
$dayOfWeek++;
$dayNumber++;
}
$output[] = $current_week;
while($dayOfMonth <= $daysInMonth)
{
$current_week = '<td align="center" class="week_num">'.($start_week++).'</td>';
if($start_week > 52) $start_week = 1;
$dayOfWeek = 1;
while($dayOfWeek <= 7)
{
if($dayOfMonth <= $daysInMonth) $current_week .= '<td class="day"><span class="week_'.($dayOfWeek > 5 ? 'end' : 'day').'" style="padding:2px">'.($dayOfMonth++).'</span></td>';
else $current_week .= '<td class="day"> </td>'; // show empty cells after the end of the month
$dayOfWeek++;
$dayNumber++;
}
$output[] = $current_week;
}
return $output;
}
// returns HTML for 4 months - starting at the given month/year
function section($year,$month)
{
$month_1 = month_calendar($year, $month);
$month_2 = month_calendar($year, $month + 1);
$month_3 = month_calendar($year, $month + 2);
$month_4 = month_calendar($year, $month + 3);
$max_weeks = max(
count($month_1),
count($month_2),
count($month_3),
count($month_4)
);
$empty_week = '';
for($i = 1; $i <= 8; $i++) // 7 days + a cell for the week number
$empty_week .= '<td class="day"> </td>';
$output = '';
for($i = 0; $i < $max_weeks; $i++)
{
$output .= '<tr>';
$output .= $month_1[$i] != '' ? $month_1[$i] : $empty_week;
$output .= $month_2[$i] != '' ? $month_2[$i] : $empty_week;
$output .= $month_3[$i] != '' ? $month_3[$i] : $empty_week;
$output .= $month_4[$i] != '' ? $month_4[$i] : $empty_week;
$output .= '</tr>';
}
return $output;
}
if($template = #file_get_contents('/tempates/calendar.html'))
{
// show calendar
$cal_year = 2020;
$template = str_replace('<tr><td>{SECTION_1}</td></tr>',section($cal_year,1),$template);
$template = str_replace('<tr><td>{SECTION_2}</td></tr>',section($cal_year,5),$template);
$template = str_replace('<tr><td>{SECTION_3}</td></tr>',section($cal_year,9),$template);
echo $template;
}
else die('Could not find template - calendar.html');
?>

Html, Vue, Laravel - loop in v-for and table

I hava a simple table, every tr is a link with a sepcific order, but I have to have one extra column n th with checking or this order is already in store. ( with checboxes ) I can't to this because when I add this, then all row i a link, but I want to this last column wasn't a link, but simple checboxes.
Here is my code:
<table class="table">
<tr>
<th>Order Number</th>
<th>Name</th>
<th>Tel</th>
<th>Email</th>
<th>Status</th>
<th>Order date</th>
<th>IS in store?</th>
</tr>
<router-link :to="'/orderDetail/'+order.id" tag="tr" v-for="order in orders" :key="order.number"
class="order-row">
<td>{{order.number}}</td>
<td>{{order.client_name}}</td>
<td>{{order.phone}}</td>
<td>{{order.email}}</td>
<td>{{order.actual_status}}</td>
<td>{{order.order_date}}</td>
<td>Here should be checbox with id of roder, but not as a link</td>
</router-link>
</table>
html css :
.order-row:hover td {
cursor: pointer;
transition-duration: 0.3s;
background-color: #EfEEEE;
border-top: 1px solid #e0093e;
border-bottom: 1px solid #e0093e;
color: #e0093e;
}

First create one method, something like this
orderRedirect: function(order) {
this.$router.replace('/orderDetail/' + order.id); // For Vuejs 2
this.$route.router.go('/orderDetail/' + order.id); //For Vuejs 1
},
Then call this function on click from table td, something like this
<table class="table">
<tr>
<th>Order Number</th>
<th>Name</th>
<th>Tel</th>
<th>Email</th>
<th>Status</th>
<th>Order date</th>
<th>IS in store?</th>
</tr>
<tr v-for="order in orders" class="order-row">
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.number}}</td>
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.client_name}}</td>
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.phone}}</td>
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.email}}</td>
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.actual_status}}</td>
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.order_date}}</td>
<td><input type="checkbox"></td>
</tr>
</table>
This is one of way that you can remove link from checkbox td

Try something along the lines of:
<td><input type="checkbox" v-model="order.actual_status"></td>

How to fix table with unbalanced thead and tbody

I created a table with fix table head. I use this simple CSS to do that.
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
width: 97%;
height: 340px;
display:block;
overflow:auto;
}
but the n the output will come like this;
I call the table from ajax. so here is the table code;
echo "<table class=\"table table-bordered table-fixed\">
<thead>
<tr>
<th class=\"col-xs-1\">No</th>
<th class=\"col-xs-2\">Name of Student</th>
<th class=\"col-xs-1\">Nic No</th>
<th class=\"col-xs-1\">Reg. No.</th>
<th class=\"col-xs-1\">adm. date</th>
<th class=\"col-xs-1\">room No</th>
<th class=\"col-xs-3\">Address</th>
<th class=\"col-xs-2\">Contact No.</th>
</tr>
</thead>
<tbody>";
$count = 1;
while($row = $result->fetch_assoc()) {
echo"
<tr id=\"".$row["reg_no"]."\" onclick=\"Redirect(this.id)\">
<td class=\"col-xs-1\">".$count."</td>
<td class=\"col-xs-2\">".$row["name_initial"]."</td>
<td class=\"col-xs-1\">".$row["nic"]."</td>
<td class=\"col-xs-1\">".$row["reg_no"]."</td>
<td class=\"col-xs-1\"></td>
<td class=\"col-xs-1\"></td>
<td class=\"col-xs-3\">".$row["resedential_adress"]."</td>
<td class=\"col-xs-2\">".$row["contact_no"]."</td></tr>
";
$count++;
}
echo "
</tbody></table>";
}
please Help me to fix this problem.

Remove display:block; from table-fixed tbody {} It will override default table property
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
width: 97%;
height: 340px;
overflow:auto;
}

issue is in your css
remove display:block; and try

Setup table column width

I am trying to setup a table column width to only 200px or 10%. However, when I populate the data from the database, the column seems to ignore the column width and expand it as much as it can. Here is my table html.
<table>
<thead>
<tr>
<th><a href='#'>City</a></th>
<th width='200' class='table_width'><a href='#'>name</a></th>
<th><a href='#'>Agent</a></th>
<th>...
//I have tried class and width attribute. both don't work.
</tr>
</thead>
<tbody>
<tr>
//these column data were popluated from database
<td><?= $row->city; ?></td>
<td width='200' class='table_width'><?= $row->_name; ?></td>
//ignore the width and expand the table cell.
<td><?= $row->agent; ?></td>
<td>...
</tr>

You want to use word-wrap:break-word;.
http://jsfiddle.net/RF4F6/1/
HTML
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Normal Width</td>
<td>Normal Width</td>
<td class="forcedWidth">hiThisIsAreallyLongStringThatWillHaveToWrapAt200PixelsOrI'llBeUnhappyAndYouWon'tLikeMeWhenI'mUnhappy.</td>
<td>Normal Width</td>
<td>NormalWidth</td>
</tr>
</tbody>
</table>
CSS
table td{
padding:.5em; /* Not essential for this answer, just a little buffer for the jsfiddle */
}
.forcedWidth{
width:200px;
word-wrap:break-word;
display:inline-block;
}

This is the standard behaviour of a table cell.
One way to do this is place a div inside your cells with style="width: 200px; overflow-hidden;"

Using table-layout: fixed for table will force browser to maintain specified dimensions.

Categories