CODEWITHSUNDEEP
htmlcss
Kurt Peek
Kurt Peek

Reputation: 57611

Removing columns from a table

I'm following a tutorial on how to create a Ruby-on-Rails blogging website with comments and tags, and have put my work so far on https://github.com/khpeek/jumpstart-blogger/.

The last part of the tutorial involves allowing authors to create user names and passwords. One of the pages is a default listing of the authors from the "sorcery" gem:

enter image description here

As you can see, there are blank columns with "Password" and "Password confirmation", which I'd like to remove.

The appearance of this page is governed by app/views/authors/index.html.erb, which reads

<p id="notice"><%= notice %></p>

<h1>Listing Authors</h1>

<table>
  <thead>
    <tr>
      <th>Username</th>
      <th>Email</th>
      <th>Password</th>
      <th>Password confirmation</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @authors.each do |author| %>
      <tr>
        <td><%= author.username %></td>
        <td><%= author.email %></td>
        <td><%= author.password %></td>
        <td><%= author.password_confirmation %></td>
        <td><%= link_to 'Show', author %></td>
        <td><%= link_to 'Edit', edit_author_path(author) %></td>
        <td><%= link_to 'Destroy', author, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Author', new_author_path %>

My thought was to comment out the lines

  <th>Password</th>
  <th>Password confirmation</th>

and

    <td><%= author.password %></td>
    <td><%= author.password_confirmation %></td>

However, if I do this, some text gets placed outside the main bounding box:

enter image description here

Is it possible to tell from this limited portion of the code what is going wrong here?

Upvotes: 0

Views: 41

Answers (1)

joaofraga
joaofraga

Reputation: 643

It happens because you have no style to "tell" your table to fill the full width.

Try adding the following stylesheet:

<style>
  table { width: 100%; }
</style>

Upvotes: 1

Related Questions