editing CSS of PHP grid
<p>I have an editable grid where I want to edit the CSS such that the textarea to show the maximum width, but somehow I can't increase the width of the text area.</p>

<p>My database has three columns:  </p>

<ol>
<li>ID</li>
<li>Name</li>
<li>Gossip</li>
</ol>

<p>I'm retrieving everything and displaying it in an editable grid using PHP.</p>

<p><strong>index.php code</strong></p>

<pre><code>&lt;?php
$db = new mysqli('localhost', 'root', '', 'bollywood');
$db-&gt;set_charset('utf8');
if ($db-&gt;connect_errno) {
    die('Check the database connection again!');
}

$userQuery = 'SELECT Id,Name,Gossip FROM bollywood';
$stmt = $db-&gt;query($userQuery);
?&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
        &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
        &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;
            $(document).ready(function() {
                var textBefore = '';
                $('#grid').find('td input').hover(function() {
                    textBefore = $(this).val();
                    $(this).focus();
                }, function() {
                    var $field = $(this),
                        text = $field.val();
                    $(this).blur();
                    // Set back previous value if empty
                    if (text.length &lt;= 0) {
                        $field.html(textBefore);
                    } else if (textBefore !== text) {
                        // Text has been changed make query
                        var value = {
                            'row': parseInt(getRowData($field)),
                            'column': parseInt($field.closest('tr').children().find(':input').index(this)),
                            'text': text
                        };
                        $.post('user.php', value)
                        .error(function() {
                            $('#message')
                                .html('Make sure you inserted correct data')
                                .fadeOut(3000)
                                .html('&amp;nbsp');
                            $field.val(textBefore);
                        })
                        .success(function() {
                            $field.val(text);
                        });
                    } else {
                        $field.val(text);
                    }

                });

                // Get the id number from row
                function getRowData($td) {
                    return $td.closest('tr').prop('class').match(/\d+/)[0];
                }
            });
        &lt;/script&gt;
        &lt;title&gt;&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;?php if ($stmt): ?&gt;
    &lt;div id="grid"&gt;
    &lt;p id="message"&gt;Click on the field to Edit Data&lt;/p&gt;
    &lt;table&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;Id&lt;/th&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Gossip&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
        &lt;?php while ($row = $stmt-&gt;fetch_assoc()): ?&gt;
            &lt;tr class="&lt;?php echo $row['Id']; ?&gt;"&gt;
                &lt;td&gt;&lt;input type="text" value="&lt;?php echo $row['Id']; ?&gt;" /&gt; &lt;/td&gt;
                &lt;td&gt;&lt;input type="text" value="&lt;?php echo $row['Name']; ?&gt;" /&gt;&lt;/td&gt;
                &lt;td &gt;&lt;input type="textarea" cols="500" rows="100" value="&lt;?php echo $row['Gossip']; ?&gt;" /&gt;&lt;/td&gt;

            &lt;/tr&gt;
        &lt;?php endwhile; ?&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;/div&gt;
    &lt;?php else: ?&gt;
        &lt;p&gt;No actors added yet&lt;/p&gt;
    &lt;?php endif; ?&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>user.php code</strong></p>

<pre><code>     &lt;?php
// Detect if there was XHR request
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &amp;&amp;
    strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $fields = array('row', 'column', 'text');
    $sqlFields = array('Id', 'Name', 'Gossip');

    foreach ($fields as $field) {
        if (!isset($_POST[$field]) || strlen($_POST[$field]) &lt;= 0) {
            sendError('No correct data');
            exit();
        }
    }

    $db = new mysqli('localhost', 'root', '', 'bollywood');
    $db-&gt;set_charset('utf8');
    if ($db-&gt;connect_errno) {
        sendError('Connect error');
        exit();
    }

    $userQuery = sprintf("UPDATE bollywood SET %s='%s' WHERE Id=%d",
            $sqlFields[intval($_POST['column'])],
            $db-&gt;real_escape_string($_POST['text']),
            $db-&gt;real_escape_string(intval($_POST['row'])));
    $stmt = $db-&gt;query($userQuery);
    if (!$stmt) {
        sendError('Update failed');
        exit();
    }

}
header('Location: index.php');
function sendError($message) {
    header($_SERVER['SERVER_PROTOCOL'] .' 320 '. $message);
}
</code></pre>

<p><strong>style.css code</strong></p>

<pre><code>body {
    font: normal 14px Comic Sans, Comic Sans MS, cursive;
}

table {
width: 500px;
}

td, th {
    border: 1px solid #d8d8bf;
}

th {
    padding: 5px;
    font: bold 14px Verdana, Arial, sans-serif;
}

td {
    padding: 10px;
    width: 200px;
}

td input {
    margin: 0;
    padding: 0;
   // width:200px;
    font: normal 14px sans-serif;
    /** Less flicker when :focus adds the underline **/
    border: 1px solid #fff;
}

td input:focus {
    outline: 0;
    border-bottom: 1px dashed #ddd !important;
}

#grid input {
   // width: 200%;
}
</code></pre>
